'use client';

import { Home, Grid3X3, ShoppingBag, Heart } from 'lucide-react';
import { useCartStore } from '@/store/cart-store';

export default function MobileNav() {
  const totalItems = useCartStore((s) => s.totalItems);
  const wishlist = useCartStore((s) => s.wishlist);
  const openCart = useCartStore((s) => s.openCart);

  const cartCount = totalItems();
  const wishCount = wishlist.size;

  const navItems = [
    { icon: Home, label: 'Home', active: true },
    { icon: Grid3X3, label: 'Shop', active: false },
    { icon: ShoppingBag, label: 'Cart', active: false, badge: cartCount, onClick: openCart },
    { icon: Heart, label: 'Wishlist', active: false, badge: wishCount },
  ];

  return (
    <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40 safe-area-bottom">
      <div className="grid grid-cols-4 h-16">
        {navItems.map((item) => (
          <button
            key={item.label}
            onClick={item.onClick}
            className="flex flex-col items-center justify-center gap-1 transition-colors"
          >
            <div className="relative">
              <item.icon
                className={`w-5 h-5 ${item.active ? 'text-brand' : 'text-gray-400'}`}
                strokeWidth={item.active ? 2.5 : 2}
              />
              {item.badge !== undefined && item.badge > 0 && (
                <span className="absolute -top-1.5 -right-2.5 min-w-[16px] h-4 px-1 bg-brand text-white text-[9px] font-bold rounded-full flex items-center justify-center">
                  {item.badge}
                </span>
              )}
            </div>
            <span className={`text-[10px] font-medium ${item.active ? 'text-brand' : 'text-gray-400'}`}>
              {item.label}
            </span>
          </button>
        ))}
      </div>
    </nav>
  );
}
