"use client";

import { useEffect, useState } from "react";
import { useCartStore } from "@/hooks/useCartStore";
import { Button } from "../ui/button";
import { ShoppingCart } from "lucide-react";
import Link from "next/link";

export const CartButton = () => {
  /*
    ⚡ Optimization: Selective Zustand Selector
    Subscribing only to 'items' to avoid re-renders when other store properties
    (like 'isOpen' or 'isLoaded') change.
  */
  const totalItems = useCartStore((state) =>
    state.items.reduce((total, item) => total + item.quantity, 0)
  );
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  return (
    <Button
      variant="ghost"
      className="flex flex-row items-center gap-2 text-pretty relative"
      asChild
    >
      <Link href="/order/cart">
        <ShoppingCart strokeWidth={2}></ShoppingCart>
        Warenkorb
        {isMounted && totalItems > 0 && (
          <span className="absolute top-2.5 left-4 transform translate-x-1/2 -translate-y-1/2 bg-red-500 text-white text-xs rounded-full px-1">
            {totalItems}
          </span>
        )}
      </Link>
    </Button>
  );
};