import { Card } from "@heroui/react";
import type { OrderDetail } from "@/lib/orders";

interface Props {
  shippingAddress: OrderDetail["shippingAddressSnapshot"];
  billingAddress: OrderDetail["billingAddressSnapshot"];
}

function AddressLines({
  address,
}: {
  address: Props["shippingAddress"] | Props["billingAddress"];
}) {
  const fullName =
    "fullName" in address
      ? address.fullName
      : `${address.firstName} ${address.lastName}`;

  return (
    <address className="space-y-0.5 text-sm not-italic text-gray-600">
      <p className="font-medium text-[#1a2e2d]">{fullName}</p>
      <p>{address.addressLine1}</p>
      {"additionalInformation" in address && address.additionalInformation && (
        <p>{address.additionalInformation}</p>
      )}
      <p>
        {address.city}, {address.postalCode}
      </p>
      <p>{address.country}</p>
      {"phone" in address && address.phone && <p>{address.phone}</p>}
    </address>
  );
}

export function OrderAddresses({ shippingAddress, billingAddress }: Props) {
  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
      <Card className="rounded-xl p-5">
        <Card.Header>
          <Card.Title className="text-sm font-semibold uppercase tracking-wide text-gray-500">
            Shipping Address
          </Card.Title>
        </Card.Header>
        <Card.Content>
          <AddressLines address={shippingAddress} />
        </Card.Content>
      </Card>

      <Card className="rounded-xl p-5">
        <Card.Header>
          <Card.Title className="text-sm font-semibold uppercase tracking-wide text-gray-500">
            Billing Address
          </Card.Title>
        </Card.Header>
        <Card.Content>
          <AddressLines address={billingAddress} />
        </Card.Content>
      </Card>
    </div>
  );
}
