export default function InputTextIcon({
  name,
  type,
  IconItem,
  label,
  value,
  onChange,
  errorMsg,
  placeholder,
  className,
}) {
  return (
    <>
      <div className={`${className}`}>
        <label
          htmlFor={name}
          className="block text-sm font-medium text-gray-700"
        >
          {label}
        </label>
        <div
          className={`mt-1 flex items-stretch border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500`}
        >
          <span className="inline-flex items-center px-3 rounded-l-md bg-gray-50 text-gray-500 text-sm">
            {IconItem && <IconItem />}
          </span>
          <input
            type={type}
            id={name}
            placeholder={placeholder}
            name={name}
            value={value}
            onChange={onChange}
            className="flex-1 px-3 py-2 block w-full rounded-r-md sm:text-sm border-none focus:ring-0 outline-none"
          />
        </div>
        {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
      </div>
    </>
  );
}