import { CreditCard } from "lucide-react";
import { DetailCard, InfoRow } from "./detail-card";
import { PaymentStatusBadge } from "../../components/order-status-badge";
import type { Order } from "../../types";

interface BillingPaymentCardProps {
  order: Order;
}

/**
 * Billing address and the payment method used for the order.
 */
export function BillingPaymentCard({ order }: BillingPaymentCardProps) {
  const address = order.billingAddress;
  const payment = order.payment;

  return (
    <DetailCard
      title="Billing & payment"
      icon={<CreditCard className="h-4 w-4 text-muted-foreground" />}
      action={<PaymentStatusBadge status={payment.status} />}
    >
      <div className="space-y-4">
        <div className="space-y-1">
          <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
            Billing 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>

        <div className="flex items-center gap-2.5 rounded-lg border bg-muted/30 px-3 py-2.5">
          <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-background ring-1 ring-border">
            <CreditCard className="h-4 w-4 text-muted-foreground" />
          </span>
          <div className="min-w-0">
            <p className="truncate text-sm font-medium">{payment.method}</p>
            <p className="truncate text-xs text-muted-foreground">
              {payment.providerName}
            </p>
          </div>
        </div>

        <dl className="space-y-1 border-t border-border/60 pt-2">
          <InfoRow label="Transaction ID" value={payment.transactionId} mono />
          <InfoRow label="Payment method" value={payment.method} />
        </dl>
      </div>
    </DetailCard>
  );
}