import { useState } from 'react';

interface CreateChecklistModalProps {
  onSave: (name: string) => Promise<boolean>;
  onClose: () => void;
}

export function CreateChecklistModal({ onSave, onClose }: CreateChecklistModalProps) {
  const [name, setName] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) return;

    const success = await onSave(name);
    if (success) {
      onClose();
    }
  };

  return (
    <div className="bg-gray-800 rounded-lg p-6 max-w-md w-full">
      <h3 className="text-xl font-bold text-white mb-4">Add Checklist</h3>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-gray-300 text-sm font-medium mb-2">Title</label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="w-full bg-gray-700 text-white rounded-lg p-3 border border-gray-600 focus:border-blue-500 focus:outline-none"
            placeholder="Checklist title..."
            autoFocus
          />
        </div>
        <div className="flex gap-2 pt-2">
          <button
            type="button"
            onClick={onClose}
            className="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
          >
            Cancel
          </button>
          <button
            type="submit"
            disabled={!name.trim()}
            className="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-medium py-2 px-4 rounded-lg transition-colors"
          >
            Add
          </button>
        </div>
      </form>
    </div>
  );
}