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>
        </>
    )
}