import { GENDER_OPTIONS } from '@/lib/gender';
import { cn } from '@/lib/utils';

interface GenderSelectProps {
  id?: string;
  label?: string;
  labelTl?: string;
  value: string;
  onChange: (value: string) => void;
  required?: boolean;
  placeholder?: string;
  className?: string;
  error?: string;
  helperText?: string;
}

export function GenderSelect({
  id = 'gender',
  label = 'Gender',
  labelTl,
  value,
  onChange,
  required = false,
  placeholder = 'Select gender',
  className,
  error,
  helperText,
}: GenderSelectProps) {
  return (
    <div className={cn('space-y-1.5', className)}>
      <label htmlFor={id} className="block text-sm font-medium text-slate-700">
        <span className="block">
          {label}
          {required ? <span className="text-red-500"> *</span> : null}
        </span>
        {labelTl && <span className="block text-xs font-normal text-muted mt-0.5">{labelTl}</span>}
      </label>
      <select
        id={id}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        required={required}
        className="form-select h-11 w-full text-sm"
      >
        <option value="">{placeholder}</option>
        {GENDER_OPTIONS.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {helperText ? <p className="text-xs text-muted whitespace-pre-line">{helperText}</p> : null}
      {error ? <p className="text-sm text-red-500">{error}</p> : null}
    </div>
  );
}