function Input({ label, id, type = 'text', value, onChange, placeholder, helpText, error, required = false, disabled = false, className = '', min, max, rows }) {

  const inputClass = `w-full px-3.5 py-2.5 text-sm font-normal border-[1.5px] rounded-[10px] outline-none transition-all duration-[180ms] ${
    error
      ? 'border-red-400 bg-red-50 focus:ring-2 focus:ring-red-200 focus:border-red-500'
      : 'border-gray-300 bg-white hover:border-gray-400 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500'
  } ${disabled ? 'bg-slate-100 text-slate-500 cursor-not-allowed border-slate-200' : 'text-slate-900'} placeholder:text-slate-400`;

  return (
    <div className={`space-y-1.5 ${className}`}>
      {label && (
        <label htmlFor={id} className="block text-sm font-semibold text-slate-700 leading-none">
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      {type === 'textarea' ? (
        <textarea
          id={id}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          required={required}
          disabled={disabled}
          rows={rows || 3}
          className={`${inputClass} resize-y`}
        />
      ) : (
        <input
          id={id}
          type={type}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          required={required}
          disabled={disabled}
          min={min}
          max={max}
          className={inputClass}
        />
      )}
      {helpText && !error && (
        <p className="text-xs text-slate-500 leading-relaxed">{helpText}</p>
      )}
      {error && (
        <p className="text-xs text-red-600 font-medium">{error}</p>
      )}
    </div>
  );
}

export default Input;