"use client";

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

interface PrefilledUserInfoProps {
  prefill: PrefillData;
  email: string;
}

export function PrefilledUserInfo({ prefill, email }: PrefilledUserInfoProps) {
  const addressDisplay = prefill.address
    ? [
        prefill.address.postcode && `〒${prefill.address.postcode}`,
        prefill.address.prefectureJa,
        prefill.address.cityJa,
        prefill.address.townJa,
        prefill.address.streetAddress,
      ]
        .filter(Boolean)
        .join(" ")
    : null;

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label className="text-muted-foreground">First Name</Label>
          <Input
            value={prefill.firstName || ""}
            disabled
            className="bg-muted text-muted-foreground"
          />
        </div>
        <div className="space-y-2">
          <Label className="text-muted-foreground">Last Name</Label>
          <Input
            value={prefill.lastName || ""}
            disabled
            className="bg-muted text-muted-foreground"
          />
        </div>
      </div>
      <div className="space-y-2">
        <Label className="text-muted-foreground">Email</Label>
        <Input value={email} disabled className="bg-muted text-muted-foreground" />
      </div>
      {addressDisplay && (
        <div className="space-y-2">
          <Label className="text-muted-foreground">Address</Label>
          <Input value={addressDisplay} disabled className="bg-muted text-muted-foreground" />
        </div>
      )}
    </div>
  );
}
