import Link from "next/link";
import { ShoppingCart } from "lucide-react";
import { loadCartSummary } from "@/lib/store/cart";

/**
 * Tiny async server component — reads the cart cookie and renders a badge
 * in the header. Zero network calls when the cart is empty.
 */
export async function HeaderCart() {
  const cart = await loadCartSummary();
  if (cart.itemCount === 0) {
    return (
      <Link
        href="/products/store/cart"
        aria-label="Open cart"
        className="relative hidden items-center gap-1 rounded-md px-2 py-1 text-[var(--color-slate)] transition-colors hover:text-[var(--color-blue)] md:inline-flex"
      >
        <ShoppingCart className="h-4 w-4" aria-hidden />
      </Link>
    );
  }
  return (
    <Link
      href="/products/store/cart"
      aria-label={`Open cart (${cart.itemCount} items)`}
      className="relative inline-flex items-center gap-1 rounded-md px-2 py-1 text-[var(--color-slate)] transition-colors hover:text-[var(--color-blue)]"
    >
      <ShoppingCart className="h-4 w-4" aria-hidden />
      <span className="absolute -right-1 -top-1 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-[var(--color-blue)] px-1 text-[10px] font-bold text-white">
        {cart.itemCount}
      </span>
    </Link>
  );
}
