import Link from "next/link"
import { buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { HugeiconsIcon } from "@hugeicons/react"
import { ArrowLeft01Icon } from "@hugeicons/core-free-icons"
import { OrderStatusBadge } from "../shared/OrderStatusBadge"
import { OrderPaymentBadge } from "../shared/OrderPaymentBadge"

interface Props {
  orderNumber: string
  createdAt: number
  status: string
  paymentStatus: string
}

export function OrderPageHeader({
  orderNumber,
  createdAt,
  status,
  paymentStatus,
}: Props) {
  const formattedDate = new Date(createdAt).toLocaleDateString("en-GB", {
    day: "numeric",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  })

  return (
    <div className="flex flex-col gap-1">
      <Link
        href="/orders"
        className={cn(
          buttonVariants({ variant: "ghost", size: "sm" }),
          "-ml-2 w-fit",
        )}
      >
        <HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2} />
        Orders
      </Link>
      <div className="flex flex-wrap items-center gap-2">
        <h1 className="font-mono text-xl font-semibold">{orderNumber}</h1>
        <OrderStatusBadge status={status} />
        <OrderPaymentBadge status={paymentStatus} />
        <span className="text-sm text-muted-foreground">{formattedDate}</span>
      </div>
    </div>
  )
}