import { useState } from 'react';
import { X, Plus } from 'lucide-react';

export default function AddSectionModal({ isOpen, onClose, onAdd }) {
  const [title, setTitle] = useState('');

  if (!isOpen) return null;

  const handleAdd = () => {
    if (title.trim()) {
      onAdd(title.trim());
      setTitle('');
      onClose();
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-4)' }}>
          <h3 className="modal__title" style={{ margin: 0 }}>Add Custom Section</h3>
          <button className="preview-panel__close" onClick={onClose}>
            <X size={16} />
          </button>
        </div>

        <div className="text-input">
          <label className="text-input__label" htmlFor="custom-section-title">
            Section Title
          </label>
          <input
            id="custom-section-title"
            type="text"
            className="text-input__field"
            placeholder="e.g., Cognitive Retraining"
            value={title}
            onChange={e => setTitle(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && handleAdd()}
            autoFocus
          />
        </div>

        <div className="modal__actions">
          <button className="navbar__btn" onClick={onClose}>
            Cancel
          </button>
          <button
            className="navbar__btn navbar__btn--primary"
            onClick={handleAdd}
            disabled={!title.trim()}
          >
            <Plus size={16} />
            Add Section
          </button>
        </div>
      </div>
    </div>
  );
}