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

export default function Header() {
  const router = useRouter();
  // Состояние для отслеживания прокрутки страницы
  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]);

  // Функция для возврата на предыдущую страницу
  const goBack = () => {
    router.back();
  };

  // Проверяем, находимся ли мы на главной странице
  const isHomePage = router.pathname === "/";
  // Проверяем, находимся ли мы на странице категорий или коллекций
  const isDetailPage = router.pathname.includes("[slug]");

  return (
    <header className="fixed w-full z-50 transition-all duration-300 bg-white shadow-sm">
      <nav className="py-4 transition-all duration-300 text-black">
        <div className="container mx-auto px-4 flex items-center justify-between">
          <div className="flex items-center space-x-6">
            {isDetailPage && (
              <button 
                onClick={goBack} 
                className="flex items-center text-sm font-medium hover:opacity-70 transition-opacity mr-4"
              >
                <ChevronLeft className="w-4 h-4 mr-1" />
                Назад
              </button>
            )}
            <Link href="/category" className="text-sm font-medium hover:opacity-70 transition-opacity">
              Каталог
            </Link>
            <Link href="/collections" className="text-sm font-medium hover:opacity-70 transition-opacity">
              Коллекции
            </Link>
            <Link href="/new-arrivals" className="text-sm font-medium hover:opacity-70 transition-opacity">
              Новинки
            </Link>
          </div>
          
          <Link href="/" className="absolute left-1/2 transform -translate-x-1/2">
            <div className="relative h-10 w-32">
              <Image
                src="/logo.png"
                alt="Brand Logo"
                fill
                className="object-contain"
                priority
              />
            </div>
          </Link>
          
          <div className="flex items-center space-x-5">
            <Link href="/favorites" className="relative hover:opacity-70 transition-opacity">
              <Heart className="w-5 h-5" />
              <span className="absolute -top-2 -right-2 bg-black text-white 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 bg-black text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
                0
              </span>
            </Link>
          </div>
        </div>
      </nav>
    </header>
  );
} 