import { useState, useEffect } from 'react';

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

export function EditCheckItemModal({ itemName, onSave, onClose }: EditCheckItemModalProps) {
  const [name, setName] = useState(itemName);

  useEffect(() => {
    setName(itemName);
  }, [itemName]);

  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">Edit Item</h3>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-gray-300 text-sm font-medium mb-2">Item Name</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="Item name..."
            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"
          >
            Save
          </button>
        </div>
      </form>
    </div>
  );
}