"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { isAuthenticated, setAuthenticated } from "@/lib/auth"

export function Header() {
  const [authed, setAuthed] = useState(false)
  const router = useRouter()

  useEffect(() => {
    setAuthed(isAuthenticated())
  }, [])

  function handleLogout() {
    setAuthenticated(false)
    setAuthed(false)
    router.push("/")
  }

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <Link href="/" className="flex items-center space-x-2">
          <img
            src="/images/logo.jpg"
            alt="Higgy's Android Boxes"
            width={180}
            height={60}
            className="h-10 w-auto"
          />
        </Link>
        <nav className="flex items-center gap-2">
          <Button variant="ghost" asChild>
            <Link href="/videos">Videos</Link>
          </Button>
          {authed ? (
            <Button
              variant="ghost"
              onClick={handleLogout}
            >
              Log Out
            </Button>
          ) : (
            <Button
              asChild
              className="bg-[#8BC34A] hover:bg-[#7CB342] text-white"
            >
              <Link href="/login">Client Login</Link>
            </Button>
          )}
        </nav>
      </div>
    </header>
  )
}