'use client';

interface FormInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  type?: string;
  disabled?: boolean;
  required?: boolean;
  error?: string;
  min?: number | string;
  max?: number | string;
  maxLength?: number;
}

export function FormInput({ label, value, onChange, placeholder, type = 'text', disabled, required, error, min, max, maxLength }: FormInputProps) {
  return (
    <div className="flex-1">
      <label className="block text-[14px] font-bold font-serif text-[#00293D] mb-2">
        {label}
        {required && <span className="text-red-500 ml-1">*</span>}
      </label>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        disabled={disabled}
        min={min}
        max={max}
        maxLength={maxLength}
        className={`w-full h-[40px] px-4 border rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none disabled:bg-gray-50 disabled:text-[#00293D]/50 ${
          error ? 'border-red-500 focus:border-red-500' : 'border-[#00293D]/20 focus:border-[#E58625]'
        }`}
      />
      {error && <p className="text-[12px] text-red-500 mt-1">{error}</p>}
    </div>
  );
}
