'use client';

interface FormTextareaProps {
  label?: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  rows?: number;
  maxLength?: number;
  required?: boolean;
  error?: string;
}

export function FormTextarea({ label, value, onChange, placeholder, rows = 4, maxLength, required, error }: FormTextareaProps) {
  return (
    <div className="flex-1">
      {label && (
        <label className="block text-[14px] font-bold font-serif text-[#00293D] mb-2">
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={rows}
        maxLength={maxLength}
        className={`w-full px-4 py-3 border rounded-[10px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none resize-none ${
          error ? 'border-red-500 focus:border-red-500' : 'border-[#00293D]/20 focus:border-[#E58625]'
        }`}
      />
      {maxLength && (
        <p className="text-right text-[12px] text-[#00293D]/50 font-serif mt-1">
          {value.length}/{maxLength}
        </p>
      )}
      {error && <p className="text-[12px] text-red-500 mt-1">{error}</p>}
    </div>
  );
}
