"use client";

import { useCart } from "@/context/CartContext";
import { ShoppingBag } from "lucide-react";
import { useEffect, useState } from "react";

export default function ProductPageDesktopHeaderCart({ 
  backControlColor, 
  isBackControlLight 
}: { 
  backControlColor: string;
  isBackControlLight: boolean;
}) {
  const { toggleCart, cartCount, items } = useCart();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setMounted(true);
  }, []);

  const showBadge = mounted && Number(cartCount) > 0 && items.length > 0;

  return (
    <button
      onClick={toggleCart}
      className="inline-flex items-center justify-center w-10 h-10 rounded-full transition-all hover:bg-black/5 active:scale-95"
      style={{
        color: backControlColor,
        textShadow: isBackControlLight ? "0 1px 2px rgba(0,0,0,0.35)" : "none",
      }}
      aria-label="Abrir carrinho"
      title="Ver carrinho"
    >
      <div className="relative">
        <ShoppingBag size={24} strokeWidth={2.5} />
        {showBadge && (
          <span className="absolute -top-1.5 -right-2 bg-red-500 text-white text-[10px] font-bold min-w-[18px] h-[18px] px-1 flex items-center justify-center rounded-full border-2 border-white">
            {cartCount}
          </span>
        )}
      </div>
    </button>
  );
}