"use client";

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

interface NewCustomerFieldsProps {
  firstName: string;
  lastName: string;
  onFirstNameChange: (value: string) => void;
  onLastNameChange: (value: string) => void;
  onAddressChange: (data: JapanAddressFormData, isComplete: boolean) => void;
  errors: AccountFormErrors;
  clearError: (field: keyof AccountFormErrors) => void;
  loading: boolean;
}

export function NewCustomerFields({
  firstName,
  lastName,
  onFirstNameChange,
  onLastNameChange,
  onAddressChange,
  errors,
  clearError,
  loading,
}: NewCustomerFieldsProps) {
  return (
    <>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="firstName">
            First Name <span className="text-danger">*</span>
          </Label>
          <Input
            id="firstName"
            value={firstName}
            onChange={e => {
              onFirstNameChange(e.target.value);
              clearError("firstName");
            }}
            placeholder="Taro"
            disabled={loading}
            error={errors.firstName}
          />
          {errors.firstName && <p className="text-sm text-danger">{errors.firstName}</p>}
        </div>

        <div className="space-y-2">
          <Label htmlFor="lastName">
            Last Name <span className="text-danger">*</span>
          </Label>
          <Input
            id="lastName"
            value={lastName}
            onChange={e => {
              onLastNameChange(e.target.value);
              clearError("lastName");
            }}
            placeholder="Yamada"
            disabled={loading}
            error={errors.lastName}
          />
          {errors.lastName && <p className="text-sm text-danger">{errors.lastName}</p>}
        </div>
      </div>

      <div className="space-y-2">
        <Label>
          Address <span className="text-danger">*</span>
        </Label>
        <JapanAddressForm onChange={onAddressChange} disabled={loading} />
        {errors.address && <p className="text-sm text-danger">{errors.address}</p>}
      </div>
    </>
  );
}
