import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

interface AddressSnapshot {
  fullName: string
  addressLine1: string
  additionalInformation?: string
  city: string
  postalCode: string
  country: string
  phone?: string
}

interface Props {
  address: AddressSnapshot
}

export function ShippingAddressCard({ address }: Props) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Shipping address</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-0.5">
        <p className="text-sm font-medium">{address.fullName}</p>
        <p className="text-sm">{address.addressLine1}</p>
        {address.additionalInformation && (
          <p className="text-sm">{address.additionalInformation}</p>
        )}
        <p className="text-sm">
          {address.city}, {address.postalCode}
        </p>
        <p className="text-xs text-muted-foreground">{address.country}</p>
        {address.phone && (
          <p className="mt-1 text-sm text-muted-foreground">{address.phone}</p>
        )}
      </CardContent>
    </Card>
  )
}
