src/components/components/CustomModal.tsx

// src/components/CustomModal.tsx
import React, { useState, useEffect, FC } from 'react';
import './CustomModal.scss'; // استایل‌ها را در فایل جداگانه قرار می‌دهیم

interface CustomModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (name: string, instructions: string) => void;
  initialName: string;
  initialInstructions: string;
}

export const CustomModal: FC<CustomModalProps> = ({ isOpen, onClose, onSave, initialName, initialInstructions }) => {
  const [name, setName] = useState(initialName);
  const [instructions, setInstructions] = useState(initialInstructions);

  useEffect(() => {
    if (isOpen) {
      setName(initialName);
      setInstructions(initialInstructions);
    }
  }, [isOpen, initialName, initialInstructions]);

  if (!isOpen) return null;

  const handleSave = () => {
    if (name.trim() && instructions.trim()) {
      onSave(name.trim(), instructions.trim());
      onClose();
    } else {
      alert("لطفا نام و دستورالعمل‌ها را وارد کنید.");
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3>ساخت شخصیت اختصاصی</h3>
          <button className="close-button" onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          <div className="form-group">
            <label htmlFor="name">نام شما (برای صدا زدن)</label>
            <input id="name" type="text" placeholder="مثلا: علی" value={name} onChange={(e) => setName(e.target.value)} />
          </div>
          <div className="form-group">
            <label htmlFor="instructions">دستورالعمل‌های شخصیت</label>
            <textarea id="instructions" placeholder="مثلا: خیلی خودمونی و بامزه صحبت کن..." value={instructions} onChange={(e) => setInstructions(e.target.value)} rows={6} />
            <small>اینجا فقط رفتار و سبک صحبت کردن دستیار را مشخص کنید.</small>
          </div>
        </div>
        <div className="modal-footer">
          <button className="save-button" onClick={handleSave}>ذخیره و فعال‌سازی</button>
        </div>
      </div>
    </div>
  );
};