import Image from "next/image";
import { Clock } from "@/components/clock";
import { LanguageSwitcher } from "@/components/language-switcher";
import { ThemeSwitcher } from "@/components/theme-switcher";

/**
 * Frosted top bar shared by the home hero and the premium auth pages.
 * Dark-styled to sit on the "always-dark" landing canvas.
 */
export function LandingTopBar({
	hotelName,
	logo,
}: {
	hotelName: string;
	logo?: string | null;
}) {
	return (
		<div className="relative z-10 flex items-center justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-7 sm:py-4">
			<div className="flex min-w-0 items-center gap-2.5 sm:gap-3">
				{logo ? (
					<Image
						src={logo}
						alt={hotelName}
						width={110}
						height={30}
						className="shrink-0 object-contain"
						unoptimized
						style={{ maxHeight: 30, width: "auto", height: "auto" }}
					/>
				) : (
					<Image
						src="/assets/images/icons/lighthouse.png"
						alt={hotelName}
						width={30}
						height={30}
						className="shrink-0"
						unoptimized
					/>
				)}
				<span className="hidden truncate text-sm font-extrabold uppercase tracking-widest landing-text-secondary sm:inline">
					{hotelName}
				</span>
			</div>
			<div className="flex shrink-0 items-center gap-1 rounded-xl border border-white/10 landing-chip px-1.5 py-1 sm:px-2">
				<LanguageSwitcher />
				<div className="hidden h-5 w-px landing-divider sm:block" />
				<Clock />
				<div className="h-5 w-px landing-divider" />
				<ThemeSwitcher />
			</div>
		</div>
	);
}