"use client";

import { useCart } from "@/context/CartContext";

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

  return (
    <button
      type="button"
      onClick={openPopup}
      className="relative flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 transition-colors hover:border-red hover:text-red"
    >
      <span aria-hidden>🛒</span>
      <span className="hidden sm:inline">سبد خرید</span>
      {itemCount > 0 && (
        <span className="absolute -top-1.5 -left-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>
  );
}