export default function SelectChoice({ type, name, label, required, placeHolder, choices, callback, selected, errorMsg, IconItem, disabled = false }) {
  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 border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} ${disabled ? '' : 'hover:border-gray-400 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' : ''}`}
            type={type}
            id={name}
            name={name}
            value={selected}
            onChange={callback}
            disabled={disabled}
          >
            <option value="">{placeHolder?.toLowerCase()}</option>
            {choices.map(({ value, label }, index) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </div>
        {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
      </div>
    </>
  );
}