"use client";

import { Input, Label } from "@/components/atoms";
import type { AccountFormErrors } from "./types";

type Gender = "male" | "female" | "other" | "";

interface PersonalInfoFieldsProps {
  phone: string;
  dateOfBirth: string;
  gender: Gender;
  onPhoneChange: (value: string) => void;
  onDateOfBirthChange: (value: string) => void;
  onGenderChange: (value: "male" | "female" | "other") => void;
  errors: AccountFormErrors;
  clearError: (field: keyof AccountFormErrors) => void;
  loading: boolean;
}

const GENDER_OPTIONS = ["male", "female", "other"] as const;

export function PersonalInfoFields({
  phone,
  dateOfBirth,
  gender,
  onPhoneChange,
  onDateOfBirthChange,
  onGenderChange,
  errors,
  clearError,
  loading,
}: PersonalInfoFieldsProps) {
  return (
    <>
      <div className="space-y-2">
        <Label htmlFor="phone">
          Phone Number <span className="text-danger">*</span>
        </Label>
        <Input
          id="phone"
          type="tel"
          value={phone}
          onChange={e => {
            onPhoneChange(e.target.value);
            clearError("phone");
          }}
          placeholder="090-1234-5678"
          disabled={loading}
          error={errors.phone}
        />
        {errors.phone && <p className="text-sm text-danger">{errors.phone}</p>}
      </div>

      <div className="space-y-2">
        <Label htmlFor="dateOfBirth">
          Date of Birth <span className="text-danger">*</span>
        </Label>
        <Input
          id="dateOfBirth"
          type="date"
          value={dateOfBirth}
          onChange={e => {
            onDateOfBirthChange(e.target.value);
            clearError("dateOfBirth");
          }}
          disabled={loading}
          error={errors.dateOfBirth}
          max={new Date().toISOString().split("T")[0]}
        />
        {errors.dateOfBirth && <p className="text-sm text-danger">{errors.dateOfBirth}</p>}
      </div>

      <div className="space-y-2">
        <Label>
          Gender <span className="text-danger">*</span>
        </Label>
        <div className="flex gap-4">
          {GENDER_OPTIONS.map(option => (
            <label key={option} className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="gender"
                value={option}
                checked={gender === option}
                onChange={() => {
                  onGenderChange(option);
                  clearError("gender");
                }}
                disabled={loading}
                className="h-4 w-4 text-primary focus:ring-primary"
              />
              <span className="text-sm capitalize">{option}</span>
            </label>
          ))}
        </div>
        {errors.gender && <p className="text-sm text-danger">{errors.gender}</p>}
      </div>
    </>
  );
}
