'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 glass-effect border-b border-white/10"
    >
      <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.05 }}
            className="flex items-center gap-3 cursor-pointer"
            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
          >
            <div className="p-2 bg-gradient-to-br from-accent-cyan to-accent-orange rounded-lg glow-cyan">
              <FaMusic className="text-2xl text-white" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange">
                Parsa
              </h1>
              <p className="text-xs text-gray-400">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-gray-300 hover:text-accent-cyan transition-colors"
              >
                Bio
              </button>
              <button
                onClick={() => scrollToSection('albums')}
                className="text-gray-300 hover:text-accent-cyan transition-colors"
              >
                Albums
              </button>
            </div>

            {/* Cart Button */}
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={onCartClick}
              className="relative p-3 bg-white/10 hover:bg-white/20 rounded-lg transition-all"
              aria-label="Shopping cart"
            >
              <FaShoppingCart className="text-xl text-accent-cyan" />
              {cartCount > 0 && (
                <motion.div
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  className="absolute -top-1 -right-1 bg-accent-orange text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
                >
                  {cartCount}
                </motion.div>
              )}
            </motion.button>
          </nav>
        </div>
      </div>
    </motion.header>
  );
}