import React from 'react';
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
label?: string;
error?: string;
helperText?: string;
icon?: React.ReactNode;
fullWidth?: boolean;
}
export const Input: React.FC<InputProps> = ({
label,
error,
helperText,
icon,
fullWidth = false,
className = '',
...props
}) => {
const inputId = props.id || `input-${Math.random().toString(36).substr(2, 9)}`;
return (
<div className={fullWidth ? 'w-full' : ''}>
{label && (
<label
htmlFor={inputId}
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
>
{label}
</label>
)}
<div className="relative">
{icon && (
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-500">
{icon}
</div>
)}
<input
id={inputId}
className={`
block w-full rounded-lg border px-3 py-2 text-sm
bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
${icon ? 'pl-10' : ''}
${error
? 'border-red-300 dark:border-red-700 focus:border-red-500 focus:ring-red-500'
: 'border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500'
}
focus:outline-none focus:ring-2 focus:ring-opacity-50
disabled:bg-gray-50 dark:disabled:bg-gray-900 disabled:text-gray-500 dark:disabled:text-gray-600 disabled:cursor-not-allowed
placeholder-gray-400 dark:placeholder-gray-500
${className}
`}
{...props}
/>
</div>
{error && (
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
)}
{helperText && !error && (
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{helperText}</p>
)}
</div>
);
};
