Cart page

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Separator,
} from "@cronus-ui/ui";
import { Minus, Package, Plus, ShieldCheck, Trash2 } from "lucide-react";
import { CART, productById } from "../lib/demo-store.js";

interface CartLine {
  id: string;
  name: string;
  option: string;
  price: string;
  qty: number;
  gradient: string;
}

// Derive the cart view from the shared demo-store CART (each line references a
// PRODUCTS id): name/price/gradient come from the product, option/qty from the
// cart line — the same items the order and invoice show.
const cartLines: CartLine[] = CART.map((line) => {
  const product = productById(line.productId);
  return {
    id: line.productId,
    name: product?.name ?? line.productId,
    option: line.option,
    price: product?.price ?? "",
    qty: line.qty,
    gradient: product?.gradient ?? "",
  };
});

export function CartPageBlock() {
  return (
    <section
      aria-label="Shopping cart"
      className="mx-auto grid w-full max-w-5xl gap-6 lg:grid-cols-[1.6fr_1fr]"
    >
      {/* Line items */}
      <Card className="h-fit gap-0 shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Your cart</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            4 items · ships from Aurora Audio
          </p>
        </CardHeader>
        <CardContent className="flex flex-col pt-2">
          {cartLines.map((line, index) => (
            <div key={line.id} className="flex flex-col">
              {index > 0 ? <Separator className="my-4" /> : null}
              <div className="flex items-start gap-4">
                <div
                  className={`flex size-16 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br ${line.gradient}`}
                >
                  <Package className="size-6 text-fg/50" aria-hidden="true" />
                </div>
                <div className="flex min-w-0 flex-1 flex-col gap-1">
                  <span className="truncate text-sm font-medium text-fg">{line.name}</span>
                  <span className="text-sm text-fg-tertiary">{line.option}</span>
                  <div className="mt-1 flex w-fit items-center rounded-lg border border-border">
                    <Button variant="ghost" size="icon-sm" className="rounded-e-none">
                      <Minus className="size-3.5" aria-hidden="true" />
                      <span className="sr-only">Decrease quantity</span>
                    </Button>
                    <span className="w-8 text-center text-sm font-medium text-fg">{line.qty}</span>
                    <Button variant="ghost" size="icon-sm" className="rounded-s-none">
                      <Plus className="size-3.5" aria-hidden="true" />
                      <span className="sr-only">Increase quantity</span>
                    </Button>
                  </div>
                </div>
                <div className="flex flex-col items-end gap-2">
                  <span className="text-sm font-medium text-fg">{line.price}</span>
                  <Button variant="ghost" size="icon-sm">
                    <Trash2 className="size-3.5" aria-hidden="true" />
                    <span className="sr-only">Remove {line.name}</span>
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </CardContent>
      </Card>

      {/* Order summary */}
      <Card className="h-fit gap-0 shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Order summary</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-2 pt-2">
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Subtotal</span>
            <span className="text-fg">$456.00</span>
          </div>
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Shipping</span>
            <span className="text-fg">Free</span>
          </div>
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span className="flex items-center gap-2">
              Discount
              <Badge variant="success">SPRING15</Badge>
            </span>
            <span className="text-success-strong">−$68.40</span>
          </div>
        </CardContent>
        <CardContent className="pt-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="cart-discount">Discount code</Label>
            <div className="flex gap-2">
              <Input id="cart-discount" placeholder="Enter code" className="flex-1" />
              <Button variant="outline">Apply</Button>
            </div>
          </div>
        </CardContent>
        <Separator className="my-4" />
        <CardFooter className="flex-col items-stretch gap-3">
          <div className="flex items-baseline justify-between">
            <span className="font-medium text-fg">Total</span>
            <span className="font-display text-2xl font-semibold text-fg">$387.60</span>
          </div>
          <Button variant="primary" size="lg" className="w-full">
            Checkout
          </Button>
          <p className="flex items-center justify-center gap-2 text-xs text-fg-tertiary">
            <ShieldCheck className="size-3.5" aria-hidden="true" />
            Secure checkout · Free returns within 60 days
          </p>
        </CardFooter>
      </Card>
    </section>
  );
}