"use client";

import Image from "next/image";
import Link from "next/link";

import { LanguageSwitcher } from "@/components/language-switcher";
import { cn } from "@/lib/utils";

type PlayerDesktopHeaderProps = {
  className?: string;
};

/** 全局顶栏：移动显示 Logo；桌面 Logo 在侧栏顶部，此处仅语言切换 */
export function PlayerDesktopHeader({ className }: PlayerDesktopHeaderProps) {
  return (
    <header
      className={cn(
        "flex h-12 shrink-0 items-center justify-between border-b border-[#e4ebf5] bg-white px-3 lg:h-14 lg:justify-end lg:px-6",
        className,
      )}
    >
      <Link href="/hall" className="inline-flex min-w-0 items-center lg:hidden" aria-label="N lotto">
        <Image
          src="/logo.png"
          alt="N lotto"
          width={243}
          height={84}
          className="h-7 w-auto max-w-[160px] object-contain object-left"
          priority
        />
      </Link>

      <div className="flex shrink-0 items-center gap-2">
        <LanguageSwitcher
          variant="minimal"
          menuAlign="end"
          showFlag={false}
          className="rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:text-xs lg:[&_button]:h-9 lg:[&_button]:gap-1.5 lg:[&_button]:px-3 lg:[&_button]:text-sm"
        />
      </div>
    </header>
  );
}
