"use client";

import React from 'react';
import Link from 'next/link';
import { RiShoppingBagLine } from '@remixicon/react';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import config from '../lib/config.json';

const CartIcon: React.FC = () => {
  const { itemCount, toggleCart } = useShopifyCart();

  return (
    <button
      onClick={toggleCart}
      className="relative p-2 text-black hover:text-gray-600 transition-colors"
    >
      <RiShoppingBagLine size={24} />
      {itemCount > 0 && (
        <span className="absolute -top-1 -right-1 bg-black text-white text-xs rounded-full w-6 h-6 flex items-center justify-center font-semibold">
          {itemCount > 99 ? '99+' : itemCount}
        </span>
      )}
    </button>
  );
};

const Header: React.FC = () => {
  return (
    <nav className="bg-white shadow-sm sticky top-0 z-30 h-16">
      <div className="container mx-auto px-4 h-full">
        <div className="flex justify-between items-center h-full">
          {/* Logo */}
          <Link href="/" className="text-2xl font-bold text-black font-heading">
            {config.brand.logo.url ? (
              <img
                src={config.brand.logo.url}
                alt={config.brand.logo.alt || 'Store'}
                className="h-8"
              />
            ) : (
              'Store'
            )}
          </Link>

          {/* Cart Icon */}
          <CartIcon />
        </div>
      </div>
    </nav>
  );
};

export default Header;