import { Truck } from "lucide-react";
import { DetailCard, InfoRow } from "./detail-card";
import { FulfillmentStatusBadge } from "../../components/order-status-badge";
import { formatDate } from "../../lib/format-utils";
import type { Order } from "../../types";

interface ShippingCardProps {
  order: Order;
}

/**
 * Shipping destination plus carrier tracking for fulfilled orders.
 */
export function ShippingCard({ order }: ShippingCardProps) {
  const shipment = order.shipment;
  const address = order.shippingAddress;

  return (
    <DetailCard
      title="Shipping & fulfilment"
      icon={<Truck className="h-4 w-4 text-muted-foreground" />}
      action={<FulfillmentStatusBadge status={order.fulfillmentStatus} />}
    >
      <div className="space-y-4">
        <div className="space-y-1">
          <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
            Shipping address
          </p>
          <p className="text-sm leading-relaxed text-foreground/90">
            {address.street}
            <br />
            {address.city}, {address.district} {address.postalCode}
            <br />
            {address.country}
          </p>
        </div>

        <dl className="space-y-1 border-t border-border/60 pt-3.5">
          {shipment ? (
            <>
              <InfoRow label="Carrier" value={shipment.carrier} />
              <InfoRow label="Tracking number" value={shipment.trackingNumber} mono />
              {shipment.shippedAt && (
                <InfoRow label="Shipped on" value={formatDate(shipment.shippedAt)} />
              )}
              {shipment.estimatedDelivery && (
                <InfoRow
                  label="Estimated delivery"
                  value={formatDate(shipment.estimatedDelivery)}
                />
              )}
            </>
          ) : (
            <p className="pb-1 text-sm text-muted-foreground">
              Tracking details will appear once the parcel is handed over to a
              courier.
            </p>
          )}
        </dl>
      </div>
    </DetailCard>
  );
}