export default function SelectChoice({ type, name, label, choices, callback, selected, error, IconItem, disabled = false }) {
  return (
    <>
      <div className="mb-4">
        <label htmlFor={name} className="block text-sm font-medium text-gray-700">{label}</label>
        <div
          className={`flex items-center border-2 rounded-md ${disabled ? 'border-gray-200' : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-500'} h-8 mt-2`}
        >
          <span className="inline-flex items-center px-3 rounded-l-md bg-gray-50 text-gray-500 text-sm h-full">
            {IconItem && <IconItem />}
          </span>
          <select
            className={`mt-1 block w-full px-2 py-0 text-base rounded-r-md sm:text-sm border-none focus:ring-0 outline-none cursor-pointer ${disabled ? 'bg-gray-100' : ''}`}
            type={type}
            id={name}
            name={name}
            value={selected}
            onChange={callback}
            disabled={disabled} // Ajout de l'attribut disabled avec une valeur par défaut de false
          >
            {choices.map(({ value, label }, index) => (
              <option key={value} value={value} className={value === '' ? 'italic' : ''}>
                {label}
              </option>
            ))}
          </select>
        </div>
        {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
      </div>
    </>
  );
}