sanihome/src/components/cart/CartButton.tsx

"use client";

import { useCart } from "@/context/CartContext";
import { CartIcon } from "@/components/ui/icons";

export function CartButton() {
  const { itemCount, openPopup } = useCart();

  return (
    <button
      type="button"
      onClick={openPopup}
      aria-label="سبد خرید"
      className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#f1f1f1] text-foreground transition-colors hover:text-red"
    >
      <CartIcon className="h-5 w-5" />
      {itemCount > 0 && (
        <span className="absolute -top-1.5 -right-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red px-1 text-[10px] font-bold text-white">
          {itemCount}
        </span>
      )}
    </button>
  );
}