import type { ReactNode } from "react";
import Link from "next/link";

import Image from "@/components/ui/resilient-image";
import { PublicAccountMenu } from "@/components/public/public-account-menu";
import { NotificationBell } from "@/components/notifications/notification-bell";
import { ThemeSwitcher } from "@/components/theme-switcher";

export function HeaderShell({ homeHref, homeLabel, children }: {
  homeHref: string;
  homeLabel: string;
  children: ReactNode;
}) {
  return (
    <header className="border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
      <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-nowrap items-center gap-2 px-4 py-2 sm:px-6">
        <Link
          href={homeHref}
          aria-label={homeLabel}
          className="mr-auto flex min-h-11 shrink-0 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
          <span className="hidden lg:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
        </Link>
        {children}
        <ThemeSwitcher />
        <NotificationBell />
        <PublicAccountMenu />
      </div>
    </header>
  );
}