'use client';

import { motion } from 'framer-motion';
import { FaMusic, FaShoppingCart } from 'react-icons/fa';
import { useCart } from '@/lib/CartContext';

interface HeaderProps {
  onCartClick?: () => void;
}

export default function Header({ onCartClick }: HeaderProps) {
  const { getCartCount } = useCart();
  const cartCount = getCartCount();

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <motion.header
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      className="fixed top-0 left-0 right-0 z-40 bg-paper-sand border-b-4 border-paper-dark shadow-paper-lg"
    >
      <div className="max-w-7xl mx-auto px-4 md:px-8 py-4">
        <div className="flex items-center justify-between">
          {/* Logo */}
          <motion.div
            whileHover={{ scale: 1.02 }}
            className="flex items-center gap-3 cursor-pointer"
            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
          >
            <div className="p-2 bg-paper-dark border-2 border-paper-brown">
              <FaMusic className="text-2xl text-paper-light" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-paper-dark tracking-tight">
                Parsa
              </h1>
              <p className="text-xs text-paper-brown">Progressive Rock</p>
            </div>
          </motion.div>

          {/* Navigation */}
          <nav className="flex items-center gap-6">
            <div className="hidden md:flex items-center gap-8">
              <button
                onClick={() => scrollToSection('bio')}
                className="text-paper-dark hover:text-paper-brown transition-colors font-medium border-b-2 border-transparent hover:border-paper-brown"
              >
                Bio
              </button>
              <button
                onClick={() => scrollToSection('albums')}
                className="text-paper-dark hover:text-paper-brown transition-colors font-medium border-b-2 border-transparent hover:border-paper-brown"
              >
                Albums
              </button>
            </div>

            {/* Cart Button */}
            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              onClick={onCartClick}
              className="relative p-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark transition-all shadow-paper"
              aria-label="Shopping cart"
            >
              <FaShoppingCart className="text-xl text-paper-light" />
              {cartCount > 0 && (
                <motion.div
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  className="absolute -top-2 -right-2 bg-paper-dark text-paper-light text-xs font-bold border-2 border-paper-brown w-6 h-6 flex items-center justify-center"
                >
                  {cartCount}
                </motion.div>
              )}
            </motion.button>
          </nav>
        </div>
      </div>
    </motion.header>
  );
}
