export default function SelectChoice({
  type,
  name,
  label,
  required,
  placeHolder,
  choices,
  callback,
  selected,
  errorMsg,
  errorLocalMsg,
  IconItem,
  disabled = false,
}) {
  const isPlaceholderSelected = selected === ''; // Vérifie si le placeholder est sélectionné
  return (
    <>
      <div>
        <label
          htmlFor={name}
          className="block text-sm font-medium text-gray-700"
        >
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
        <div
          className={`mt-1 flex items-center border rounded-md ${
            errorMsg || errorLocalMsg
              ? 'border-red-500 hover:border-red-700'
              : 'border-gray-200 hover:border-gray-400'
          } ${disabled ? '' : 'focus-within:border-gray-500'}`}
        >
          {IconItem && (
            <span className="inline-flex items-center px-3 text-gray-500 text-sm">
              {<IconItem />}
            </span>
          )}
          <select
            className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${
              disabled ? 'bg-gray-100' : ''
            } ${isPlaceholderSelected ? 'italic text-gray-500' : 'not-italic text-gray-800'}`} // Applique le style classique si une option autre que le placeholder est sélectionnée
            type={type}
            id={name}
            name={name}
            value={selected}
            onChange={callback}
            disabled={disabled}
          >
            {/* Placeholder en italique */}
            <option value="" className="italic text-gray-500">
              {placeHolder?.toLowerCase()}
            </option>
            {/* Autres options sans italique */}
            {choices.map(({ value, label }) => (
              <option
                key={value}
                value={value}
                className="not-italic text-gray-800"
              >
                {label}
              </option>
            ))}
          </select>
        </div>
        {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
      </div>
    </>
  );
}
