dressed_for_succes_store/frontend/components/Header.tsx

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

export default function Header() {
  const router = useRouter();
  // Состояние для отслеживания прокрутки страницы
  const [scrolled, setScrolled] = useState(false);
  // Состояние для отслеживания аутентификации пользователя
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  // Состояние для отображения выпадающего меню пользователя
  const [showUserMenu, setShowUserMenu] = useState(false);

  // Эффект для проверки аутентификации при загрузке компонента
  useEffect(() => {
    setIsAuthenticated(authService.isAuthenticated());
  }, []);

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

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

  // Функция для выхода из системы
  const handleLogout = () => {
    authService.logout();
    setIsAuthenticated(false);
    setShowUserMenu(false);
    router.push('/');
  };

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

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

  // Функция для переключения отображения меню пользователя
  const toggleUserMenu = () => {
    setShowUserMenu(!showUserMenu);
  };

  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="/all-products" 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>
            
            <div className="relative">
              <button 
                onClick={toggleUserMenu}
                className="hover:opacity-70 transition-opacity focus:outline-none"
              >
                <User className="w-5 h-5" />
              </button>
              
              {showUserMenu && (
                <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
                  {isAuthenticated ? (
                    <>
                      <Link href="/account" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        Мой профиль
                      </Link>
                      <Link href="/account/orders" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        Мои заказы
                      </Link>
                      {/* Ссылка на админ-панель, если пользователь админ */}
                      <Link href="/admin" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        Админ-панель
                      </Link>
                      <button 
                        onClick={handleLogout}
                        className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                      >
                        <div className="flex items-center">
                          <LogOut className="w-4 h-4 mr-2" />
                          Выйти
                        </div>
                      </button>
                    </>
                  ) : (
                    <>
                      <Link href="/login" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        Войти
                      </Link>
                      <Link href="/register" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        Регистрация
                      </Link>
                    </>
                  )}
                </div>
              )}
            </div>
            
            <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>
  );
}