import { Chip } from "@heroui/react";
import { ORDER_STATUS_CONFIG, PAYMENT_STATUS_CONFIG } from "@/lib/orders";
import type { OrderStatus, PaymentStatus } from "@/lib/orders";

interface Props {
  orderNumber: string;
  status: OrderStatus;
  paymentStatus: PaymentStatus;
  createdAt: number;
  paidAt?: number;
}

function formatTimestamp(ts: number): string {
  return new Intl.DateTimeFormat("en-GB", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(new Date(ts));
}

export function OrderHeader({
  orderNumber,
  status,
  paymentStatus,
  createdAt,
  paidAt,
}: Props) {
  const statusCfg = ORDER_STATUS_CONFIG[status];
  const paymentCfg = PAYMENT_STATUS_CONFIG[paymentStatus];

  return (
    <div className="space-y-3">
      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
        <h1 className="font-[family-name:var(--font-fraunces)] text-xl font-semibold text-[#1a2e2d] md:text-2xl">
          Order {orderNumber}
        </h1>
        <div className="flex flex-wrap gap-2">
          <Chip size="sm" variant="soft" className={statusCfg.colorClass}>
            {statusCfg.label}
          </Chip>
          <Chip size="sm" variant="soft" className={paymentCfg.colorClass}>
            {paymentCfg.label}
          </Chip>
        </div>
      </div>

      <div className="flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500">
        <p>
          <span className="font-medium text-[#1a2e2d]">Placed on</span>{" "}
          {formatTimestamp(createdAt)}
        </p>
        {paidAt && (
          <p>
            <span className="font-medium text-[#1a2e2d]">Paid on</span>{" "}
            {formatTimestamp(paidAt)}
          </p>
        )}
      </div>
    </div>
  );
}
