import Link from "next/link";
import { Search, Heart, User, ShoppingCart } from "lucide-react";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import Image from "next/image";

export default function Header() {
  // Состояние для отслеживания прокрутки страницы
  const [scrolled, setScrolled] = useState(false);

  // Эффект для отслеживания прокрутки
  useEffect(() => {
    const handleScroll = () => {
      const isScrolled = window.scrollY > 50;
      if (isScrolled !== scrolled) {
        setScrolled(isScrolled);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  return (
    <header className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white shadow-sm' : 'bg-transparent'}`}>
      <nav className={`py-4 transition-all duration-300 ${scrolled ? 'text-black' : 'text-white'}`}>
        <div className="container mx-auto px-4 flex items-center justify-between">
          <div className="flex items-center space-x-6">
            <Link href="/catalog" className="text-sm font-medium hover:opacity-70 transition-opacity">
              Каталог
            </Link>
            <Link href="/new" className="text-sm font-medium hover:opacity-70 transition-opacity">
              Новинки
            </Link>
            <Link href="/stores" className="text-sm font-medium hover:opacity-70 transition-opacity">
              Магазины
            </Link>
          </div>
          <Link href="/" className="text-2xl font-bold">
            <div className="relative h-10 w-32">
              <Image 
                src="/logo.png" 
                alt="Brand Logo" 
                layout="fill" 
                objectFit="contain"
              />
            </div>
          </Link>
          <div className="flex items-center space-x-5">
            <button className="hover:opacity-70 transition-opacity">
              <Search className="w-5 h-5" />
            </button>
            <Link href="/favorites" className="relative hover:opacity-70 transition-opacity">
              <Heart className="w-5 h-5" />
              <span className={`absolute -top-2 -right-2 ${scrolled ? 'bg-black text-white' : 'bg-white text-black'} text-xs rounded-full w-4 h-4 flex items-center justify-center`}>
                0
              </span>
            </Link>
            <Link href="/account" className="hover:opacity-70 transition-opacity">
              <User className="w-5 h-5" />
            </Link>
            <Link href="/cart" className="relative hover:opacity-70 transition-opacity">
              <ShoppingCart className="w-5 h-5" />
              <span className={`absolute -top-2 -right-2 ${scrolled ? 'bg-black text-white' : 'bg-white text-black'} text-xs rounded-full w-4 h-4 flex items-center justify-center`}>
                0
              </span>
            </Link>
          </div>
        </div>
      </nav>
    </header>
  );
} 