'use client';

import { useAppStore } from '@/lib/store';
import { ShoppingCart } from 'lucide-react';

export default function FloatingCartButton() {
  const { cart, setCurrentSection, currentSection } = useAppStore();

  const cartItemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
  const hasItems = cart.length > 0;

  // Don't show on checkout section or when cart is empty
  if (!hasItems || currentSection === 'checkout') return null;

  return (
    <button
      onClick={() => setCurrentSection('checkout')}
      className="fixed bottom-20 right-4 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-xl shadow-primary/30 transition-all duration-300 hover:scale-110 hover:shadow-2xl active:scale-95 animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-4"
      aria-label="Open Cart"
    >
      <ShoppingCart className="h-6 w-6" />
      <span className="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-white px-1">
        {cartItemCount}
      </span>
    </button>
  );
}
