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, X } from "lucide-react"
import { CatalogMenu } from "./catalog-menu"
import { Sheet, SheetContent, SheetTrigger, SheetClose } 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"
import { CartSummary } from "./cart-summary"

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-wrap items-center justify-between">
          <div className="flex items-center w-full sm:w-auto mb-4 sm:mb-0">
            <Link href="/" className="text-2xl font-bold text-blue-600 mr-4">
              STORE
            </Link>
            <div className="hidden sm:block">
              <CatalogMenu />
            </div>
          </div>
          <div className="flex items-center w-full sm:flex-1 order-3 sm:order-2 mb-4 sm:mb-0">
            <div className="flex-grow mr-4">
              <Search />
            </div>
            <div className="hidden sm:flex items-center gap-4">
              <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>
              <Link href="/cart">
              <Button variant="ghost" size="icon" className="relative">
                <ShoppingCart className="h-5 w-5" />
                </Button>
                </Link>

              {/* <Sheet open={isCartOpen} onOpenChange={setIsCartOpen}>
                <SheetTrigger asChild>
                  <Button variant="ghost" size="icon" className="relative">
                    <ShoppingCart className="h-5 w-5" />
                    <Link href="/cart" onClick={() => setIsCartOpen(false)}>
	                        
                      </Link>
                    {getTotalUniqueItems() > 0 && (
                      <Badge
                        variant="destructive"
                        className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0"
                      >
                        {getTotalUniqueItems()}
                      </Badge>
                    )}
                  </Button>
                </SheetTrigger>
                <SheetContent side="right" className="w-full sm:max-w-md">
                  
                  <div className="mt-6">
                    <Button asChild className="w-full">
                      <Link href="/cart" onClick={() => setIsCartOpen(false)}>
	                        Перейти в корзину
                      </Link>
                    </Button>
                  </div>
                  <div className="flex justify-between items-center mb-6">
                    <h2 className="text-2xl font-bold">Корзина</h2>
                    <SheetClose asChild>
                      <Button variant="ghost" size="icon">
                        <X className="h-5 w-5" />
                      </Button>
                    </SheetClose>
                  </div>
                  <CartSummary />
                  <div className="mt-6">
                    <Button asChild className="w-full">
                      <Link href="/cart" onClick={() => setIsCartOpen(false)}>
	                        Перейти в корзину
                      </Link>
                    </Button>
                  </div>
                 
                </SheetContent>
              </Sheet> */}
            </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="h-[100vh] pt-16">
                  <nav className="flex flex-col gap-4">
                    <div className="border-b pb-4">
                      <CatalogMenu onSelect={() => setIsMenuOpen(false)} />
                    </div>
                    <button
                      onClick={() => handleNavigate(isLoggedIn ? "/profile" : "/login")}
                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
                    >
                      <User className="h-5 w-5" />
                      <span>Личный кабинет</span>
                    </button>
                    <button
                      onClick={() => handleNavigate("/favorites")}
                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
                    >
                      <Heart className="h-5 w-5" />
                      <span>Избранное</span>
                      {getTotalFavorites() > 0 && <Badge variant="destructive">{getTotalFavorites()}</Badge>}
                    </button>
                    <button
                      onClick={() => handleNavigate("/cart")}
                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
                    >
                      <ShoppingCart className="h-5 w-5" />
                      <span>Корзина</span>
                      {getTotalUniqueItems() > 0 && <Badge variant="destructive">{getTotalUniqueItems()}</Badge>}
                    </button>
                  </nav>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}