'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { useCart } from '@/lib/cartStore';

export default function CartButton() {
  // Avoid hydration mismatch: item count only read after mount.
  const [mounted, setMounted] = useState(false);
  const items = useCart((s) => s.items);

  useEffect(() => setMounted(true), []);

  const count = mounted ? items.reduce((n, i) => n + i.quantity, 0) : 0;

  return (
    <Link
      href="/cart"
      className="group flex items-center gap-2 border border-ink px-4 py-2 text-sm transition-colors hover:border-clay hover:bg-clay hover:text-paper"
    >
      <span className="font-mono">Bag</span>
      <span className="font-mono tabular-nums">({count})</span>
    </Link>
  );
}
