eternos/frontend/style/components/header.tsx

"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Search } from "./search"
import { Button } from "./ui/button"
import { ShoppingCart, Heart, User, Menu } from "lucide-react"
import { CatalogMenu } from "./catalog-menu"
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
import { useCart } from "@/contexts/cart-context"
import { useFavorites } from "@/contexts/favorites-context"
import { useAuth } from "@/contexts/auth-context"
import { Badge } from "./ui/badge"

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isCartOpen, setIsCartOpen] = useState(false)
  const { getTotalItems, getTotalUniqueItems } = useCart()
  const { getTotalFavorites } = useFavorites()
  const { isLoggedIn } = useAuth()
  const router = useRouter()

  const handleNavigate = (path: string) => {
    router.push(path)
    setIsMenuOpen(false)
  }

  return (
    <header className="border-b sticky top-0 bg-white z-50">
      <div className="container mx-auto px-4 py-4">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 sm:gap-8">
          {/* Левая секция: логотип и каталог */}
          <div className="flex items-center gap-4 w-full sm:w-auto justify-between sm:justify-start">
            <Link href="/" className="text-2xl font-bold text-blue-600">
              ETERNOS
            </Link>
            <div className="hidden sm:block">
              <CatalogMenu />
            </div>
            <div className="sm:hidden">
              <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
                <SheetTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
                <SheetContent
                  side="right"
                  className="w-[300px] h-[100vh] border-l"
                  // Отключаем стандартную кнопку закрытия
                  closeButton={false}
                >
                  <nav className="flex flex-col gap-4 pt-2">
                    <div className="border-b pb-4">
                      <CatalogMenu onSelect={() => setIsMenuOpen(false)} />
                    </div>
                    <Link
                      href={isLoggedIn ? "/profile" : "/login"}
                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
                      onClick={() => setIsMenuOpen(false)}
                    >
                      <User className="h-5 w-5" />
                      <span>Личный кабинет</span>
                    </Link>
                    <Link
                      href="/favorites"
                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
                      onClick={() => setIsMenuOpen(false)}
                    >
                      <Heart className="h-5 w-5" />
                      <span>Избранное</span>
                      {getTotalFavorites() > 0 && <Badge variant="destructive">{getTotalFavorites()}</Badge>}
                    </Link>
                    <Link
                      href="/cart"
                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
                      onClick={() => setIsMenuOpen(false)}
                    >
                      <ShoppingCart className="h-5 w-5" />
                      <span>Корзина</span>
                      {getTotalUniqueItems() > 0 && <Badge variant="destructive">{getTotalUniqueItems()}</Badge>}
                    </Link>
                  </nav>
                </SheetContent>
              </Sheet>
            </div>
          </div>

          {/* Центральная секция: поиск */}
          <div className="w-full sm:max-w-lg">
            <Search />
          </div>

          {/* Правая секция: кнопки действий */}
          <div className="hidden sm:flex items-center gap-6 justify-end">
            <Button variant="ghost" size="icon" asChild>
              <Link href={isLoggedIn ? "/profile" : "/login"}>
                <User className="h-5 w-5" />
              </Link>
            </Button>
            <Button variant="ghost" size="icon" className="relative" asChild>
              <Link href="/favorites">
                <Heart className="h-5 w-5" />
                {getTotalFavorites() > 0 && (
                  <Badge
                    variant="destructive"
                    className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0"
                  >
                    {getTotalFavorites()}
                  </Badge>
                )}
              </Link>
            </Button>
            <Button variant="ghost" size="icon" className="relative" asChild>
              <Link href="/cart">
                <ShoppingCart className="h-5 w-5" />
                {getTotalUniqueItems() > 0 && (
                  <Badge
                    variant="destructive"
                    className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0"
                  >
                    {getTotalUniqueItems()}
                  </Badge>
                )}
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </header>
  )
}