"use client";

import Link from "next/link";

import { useCart } from "./RentalCartProvider";

export function CartBadge() {
  const { totalItems } = useCart();
  if (totalItems === 0) return null;
  return (
    <Link
      href="/panier"
      className="relative hidden text-zinc-700 hover:text-zinc-900 sm:inline"
      aria-label={`Panier (${totalItems} item)`}
    >
      🛒
      <span className="absolute -right-2 -top-2 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-emerald-600 px-1 text-[10px] font-semibold text-white">
        {totalItems}
      </span>
    </Link>
  );
}