"use client";

interface AddressData {
  postcode?: string | null | undefined;
  prefectureJa?: string | null | undefined;
  cityJa?: string | null | undefined;
  townJa?: string | null | undefined;
  streetAddress?: string | null | undefined;
  buildingName?: string | null | undefined;
  roomNumber?: string | null | undefined;
}

interface AccountInfoDisplayProps {
  firstName: string;
  lastName: string;
  email: string;
  address?: AddressData | null | undefined;
}

export function AccountInfoDisplay({
  firstName,
  lastName,
  email,
  address,
}: AccountInfoDisplayProps) {
  const formatAddress = (addr: AddressData): string => {
    const parts = [
      addr.postcode ? `〒${addr.postcode}` : "",
      addr.prefectureJa || "",
      addr.cityJa || "",
      addr.townJa || "",
      addr.streetAddress || "",
      addr.buildingName || "",
      addr.roomNumber || "",
    ].filter(Boolean);
    return parts.join("");
  };

  return (
    <div className="p-4 rounded-lg bg-muted/50 border border-border">
      <p className="text-sm text-muted-foreground mb-1">Account details:</p>
      <p className="font-medium text-foreground">
        {firstName} {lastName}
      </p>
      <p className="text-sm text-muted-foreground mt-1">{email}</p>
      {address && <p className="text-sm text-muted-foreground mt-1">{formatAddress(address)}</p>}
    </div>
  );
}
