Cards

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cronus-ui/ui";
import { Package, RotateCcw } from "lucide-react";

type OrderStatus = "Delivered" | "In transit" | "Processing" | "Refunded";

interface OrderCardData {
  id: string;
  date: string;
  total: string;
  status: OrderStatus;
  summary: string;
  thumbs: { id: string; gradient: string }[];
}

const orderCards: OrderCardData[] = [
  {
    id: "#CD-58291",
    date: "Jul 9, 2026",
    total: "$387.60",
    status: "In transit",
    summary: "Aurora Wireless Headphones + 2 more",
    thumbs: [
      { id: "aurora", gradient: "from-primary/30 to-info/20" },
      { id: "case", gradient: "from-info/30 to-success/20" },
      { id: "cushions", gradient: "from-warning/30 to-primary/20" },
    ],
  },
  {
    id: "#CD-57904",
    date: "Jun 20, 2026",
    total: "$129.00",
    status: "Delivered",
    summary: "Aluminum Headphone Stand",
    thumbs: [{ id: "stand", gradient: "from-success/30 to-info/20" }],
  },
  {
    id: "#CD-57648",
    date: "Jun 11, 2026",
    total: "$94.50",
    status: "Delivered",
    summary: "Braided USB-C Cable · 2 m + 1 more",
    thumbs: [
      { id: "cable", gradient: "from-info/30 to-primary/20" },
      { id: "adapter", gradient: "from-primary/30 to-warning/20" },
    ],
  },
];

function orderStatusVariant(status: OrderStatus) {
  if (status === "Delivered") return "success" as const;
  if (status === "In transit") return "info" as const;
  if (status === "Processing") return "warning" as const;
  return "secondary" as const;
}

export function OrderHistoryCardsBlock() {
  return (
    <section aria-label="Order history" className="mx-auto flex w-full max-w-2xl flex-col gap-4">
      <header className="flex flex-wrap items-end justify-between gap-3">
        <div className="flex flex-col gap-1">
          <h2 className="font-display text-2xl font-semibold text-fg">Order history</h2>
          <p className="text-sm text-fg-secondary">Your purchases from the last 90 days.</p>
        </div>
        <Badge variant="secondary">3 orders</Badge>
      </header>

      {orderCards.map((order) => (
        <Card key={order.id} className="gap-0 shadow-sm">
          <CardHeader>
            <CardTitle className="font-display text-base">{order.id}</CardTitle>
            <p className="col-span-full text-sm text-fg-secondary">{order.date}</p>
            <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
              <Badge variant={orderStatusVariant(order.status)}>{order.status}</Badge>
            </div>
          </CardHeader>
          <CardContent className="flex flex-col gap-3 pt-3">
            <div className="flex items-center gap-2">
              {order.thumbs.map((thumb) => (
                <div
                  key={thumb.id}
                  aria-hidden="true"
                  className={`flex size-12 items-center justify-center rounded-lg bg-gradient-to-br ${thumb.gradient}`}
                >
                  <Package className="size-4 text-fg/50" />
                </div>
              ))}
            </div>
            <p className="text-sm text-fg-secondary">{order.summary}</p>
          </CardContent>
          <CardFooter className="flex-wrap items-center justify-between gap-3 pt-4">
            <span className="font-display text-lg font-semibold text-fg">{order.total}</span>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm">
                View details
              </Button>
              <Button size="sm">
                <RotateCcw className="size-3.5" aria-hidden="true" />
                Reorder
              </Button>
            </div>
          </CardFooter>
        </Card>
      ))}
    </section>
  );
}