"use client"

import Link from "next/link"
import { Settings2 } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { Brand } from "@/components/brand"
import { ThemeToggle } from "@/components/theme-toggle"

/** Kopfzeile der öffentlichen Seiten. */
export function PublicHeader({ subtitle }: { subtitle?: string }) {
  return (
    <header className="sticky top-0 z-40 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between gap-4 px-6">
        <Link href="/" className="rounded-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
          <Brand subtitle={subtitle} />
          <span className="sr-only">Zur Übersicht</span>
        </Link>

        <div className="flex items-center gap-1">
          <ThemeToggle />
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="ghost" size="icon" asChild>
                <Link href="/admin" target="_blank">
                  <Settings2 />
                  <span className="sr-only">Admin-Bereich</span>
                </Link>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Admin-Bereich</TooltipContent>
          </Tooltip>
        </div>
      </div>
    </header>
  )
}