shopify-template/components/shopify/header.tsx

'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useCartStore } from '@/hooks/use-shopify-cart';
import CartDrawer from '@/components/shopify/cart-drawer';
import SearchDialog from '@/components/shopify/search-dialog';
import { RiShoppingBagLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';
import { Button } from '@/components/ui/button';

const CartIcon: React.FC = () => {
  const toggleCart = useCartStore((s) => s.toggleCart);
  const cart = useCartStore((s) => s.cart);
  const itemCount =
    cart?.lines?.edges?.reduce((sum, { node }) => sum + node.quantity, 0) ?? 0;

  return (
    <Button
      onClick={toggleCart}
      variant="ghost"
      size="icon"
      aria-label={`Open bag (${itemCount})`}
      className="relative rounded-full"
    >
      <RiShoppingBagLine className="size-5" />
      {itemCount > 0 && (
        <span className="absolute top-0 right-0 bg-primary text-primary-foreground text-[10px] font-mono rounded-full w-4 h-4 flex items-center justify-center">
          {itemCount > 99 ? '99+' : itemCount}
        </span>
      )}
    </Button>
  );
};

export interface NavLink {
  label: string;
  url: string;
}

interface HeaderProps {
  storeName?: string;
  logoUrl?: string;
  links?: NavLink[];
}

const Header: React.FC<HeaderProps> = ({
  storeName = 'Shop',
  logoUrl,
  links = [
    { label: 'Shop', url: '/' },
    { label: 'Collections', url: '/collections' },
  ],
}) => {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <nav className="bg-background/95 backdrop-blur-md sticky top-0 z-50">
      <div className="max-w-screen-2xl mx-auto px-8">
        <div className="flex justify-between items-center h-14">
          {/* Logo */}
          <Link href="/" className="flex items-center">
            {logoUrl ? (
              <img
                src={logoUrl}
                alt={storeName}
                className="h-6 w-auto object-contain"
              />
            ) : (
              <span className="text-xl font-medium tracking-tight text-foreground">
                {storeName}
              </span>
            )}
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-x-8 text-sm">
            {links.map((link, index) => (
              <Link
                key={index}
                href={link.url}
                className="text-foreground relative after:absolute after:bottom-[-4px] after:left-1/2 after:-translate-x-1/2 after:h-px after:w-0 after:bg-foreground after:transition-[width] after:duration-300 hover:after:w-full"
              >
                {link.label}
              </Link>
            ))}
          </div>

          {/* Actions */}
          <div className="flex items-center">
            <SearchDialog />
            <CartIcon />

            {/* Mobile hamburger */}
            <Button
              onClick={() => setMenuOpen(!menuOpen)}
              variant="ghost"
              size="icon"
              className="md:hidden"
              aria-label="Toggle menu"
            >
              {menuOpen ? (
                <RiCloseLine className="size-5" />
              ) : (
                <RiMenu3Line className="size-5" />
              )}
            </Button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {menuOpen && (
        <div className="md:hidden bg-background">
          <div className="max-w-screen-2xl mx-auto px-8 pb-6 flex flex-col gap-y-4 text-sm">
            {links.map((link, index) => (
              <Link
                key={index}
                href={link.url}
                onClick={() => setMenuOpen(false)}
                className="text-foreground hover:text-muted-foreground transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </div>
        </div>
      )}

      <CartDrawer />
    </nav>
  );
};

export default Header;