import Link from "next/link";
import { BookOpenIcon, SettingsIcon } from "lucide-react";

import { Button } from "@/components/ui/button";

export function SiteHeader() {
  return (
    <header className="border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
      <div className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between px-4 sm:px-6">
        <Link
          href="/"
          className="flex min-h-11 items-center gap-3 rounded-lg font-heading text-base font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <span className="grid size-9 place-items-center rounded-lg bg-primary text-primary-foreground">
            <BookOpenIcon aria-hidden="true" className="size-5" />
          </span>
          <span>
            Buzz Sheet
            <span className="ml-2 hidden font-normal text-muted-foreground sm:inline">
              คู่มือที่อ่านง่าย
            </span>
          </span>
        </Link>
        <Button variant="ghost" size="sm" nativeButton={false} render={<Link href="/admin" />}>
          <SettingsIcon aria-hidden="true" />
          จัดการเนื้อหา
        </Button>
      </div>
    </header>
  );
}