import { useState } from 'react';
import { BookOpen, Palette } from 'lucide-react';
import InputTextIcon from '@/components/InputTextIcon';
import InputColorIcon from '@/components/InputColorIcon';
import Button from '@/components/Button';

const SpecialityForm = ({ speciality = {}, onSubmit, isNew }) => {
  const [nom, setNom] = useState(speciality.nom || '');
  const [codeCouleur, setCodeCouleur] = useState(speciality.codeCouleur || '#FFFFFF');

  const handleSubmit = () => {
    const updatedData = {
      nom,
      codeCouleur,
    };
    onSubmit(updatedData, isNew);
  };

  return (
    <div className="space-y-4 mt-8">
      <div>
        <InputTextIcon 
            type="text" 
            IconItem={BookOpen}
            placeholder="Nom de la spécialité"
            value={nom}
            onChange={(e) => setNom(e.target.value)}
            className="w-full mt-4"
        />
      </div>
      <div className="mt-4">
        <InputColorIcon 
            type="color" 
            IconItem={Palette}
            placeholder="Nom de la spécialité"
            value={codeCouleur}
            onChange={(e) => setCodeCouleur(e.target.value)}
            className="w-full mt-4"
        />
      </div>
      <div className="flex justify-end mt-4 space-x-4">
        <Button   text="Créer"
                  onClick={handleSubmit}
                  className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
                    !nom
                        ? "bg-gray-300 text-gray-700 cursor-not-allowed"
                        : "bg-emerald-500 text-white hover:bg-emerald-600"
                  }`}
                  primary
                  disabled={!nom}
                  type="submit"
                  name="Create" />
      </div>
    </div>
  );
};

export default SpecialityForm;