"use client";

import { useState, useEffect } from "react";

export default function CartCountMobile() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const readCount = () => {
      try {
        const raw = localStorage.getItem("kc_cart");
        if (!raw) return 0;
        const items = JSON.parse(raw);
        return Array.isArray(items)
          ? items.reduce((s: number, i: { quantity?: number }) => s + (i.quantity || 0), 0)
          : 0;
      } catch {
        return 0;
      }
    };

    const refresh = () => setCount(readCount());
    refresh();

    window.addEventListener("cart-updated", refresh);
    window.addEventListener("storage", (e) => {
      if (e.key === "kc_cart" || e.key === null) refresh();
    });

    return () => window.removeEventListener("cart-updated", refresh);
  }, []);

  if (count === 0) return null;

  return (
    <span className="min-w-[20px] h-5 px-1.5 bg-gold-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
      {count > 99 ? "99+" : count}
    </span>
  );
}