"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { useAuth } from "@/lib/auth-context"
import { User, Menu, X, ShoppingBag } from "lucide-react"
import { appConfig } from "@/lib/config"

export function SiteHeader() {
  const { isLoggedIn } = useAuth()
  const router = useRouter()
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <header className="sticky top-0 z-50 w-full bg-white border-b">
      <div className="container flex h-16 items-center justify-between">
        <Link href="/" className="flex items-center space-x-2">
          {appConfig.logoUrl ? (
            <img src={appConfig.logoUrl} alt={appConfig.name} className="h-8 w-auto" />
          ) : (
            <span className="text-xl font-bold text-primary">{appConfig.name}</span>
          )}
        </Link>

        <nav className="hidden md:flex items-center space-x-6">
          <Button asChild>
            <Link href="/comprar">
              <ShoppingBag className="mr-2 h-4 w-4" />
              Ver produtos
            </Link>
          </Button>
        </nav>

        <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon" className="md:hidden">
              {isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </Button>
          </SheetTrigger>
          <SheetContent side="right" className="w-[300px]">
            <SheetTitle className="sr-only">Menu</SheetTitle>
            <nav className="flex flex-col space-y-4 mt-4">
              <Button
                className="w-full"
                onClick={() => { setIsMenuOpen(false); router.push("/comprar") }}
              >
                <ShoppingBag className="mr-2 h-4 w-4" />
                Ver produtos
              </Button>
              {isLoggedIn && (
                <Button
                  variant="outline"
                  onClick={() => { setIsMenuOpen(false); router.push("/admin") }}
                  className="w-full"
                >
                  <User className="h-4 w-4 mr-2" />
                  Dashboard
                </Button>
              )}
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  )
}