import { Header as DenjsHeader } from "denjs-ui";
import {
	AlertCircle,
	CircleHelp,
	Lightbulb,
	Mail,
	PlayCircle,
	WandSparkles,
} from "lucide-react";
import { LanguageSwitcher } from "#/features/change-language";
import { ThemeToggle } from "#/features/theme-toggle/ThemeToggle";
import { useMessages } from "#/shared/lib/i18n";
import { LowerLeftLogo } from "#/shared/ui/lower-left-logo";

export function Header() {
	const m = useMessages();

	return (
		<DenjsHeader
			brand={
				<div className="flex items-center gap-3">
					<a
						href="/"
						className="inline-flex no-underline"
						aria-label="Monie home"
					>
						<LowerLeftLogo
							aria-label="Monie"
							className="h-8 w-auto max-w-40 select-none text-foreground transition-colors"
						/>
					</a>
					<div className="hidden lg:flex items-center gap-2">
						<LanguageSwitcher />
						<ThemeToggle />
					</div>
				</div>
			}
			productLabel={m.header_nav_solution()}
			products={[
				{
					name: m.header_nav_problem(),
					href: "/#problem",
					icon: AlertCircle,
				},
				{
					name: m.header_nav_solution(),
					href: "/#solution",
					icon: Lightbulb,
				},
				{
					name: m.header_nav_how(),
					href: "/#how",
					icon: WandSparkles,
				},
				{
					name: m.header_nav_faq(),
					href: "/#faq",
					icon: CircleHelp,
				},
			]}
			callsToAction={[
				{
					name: m.header_create_page(),
					href: "/#demo",
					icon: PlayCircle,
				},
				{
					name: m.header_email_aria(),
					href: "mailto:hello@monie.app",
					icon: Mail,
				},
			]}
			links={[
				{
					name: m.header_about(),
					href: "/about",
				},
			]}
			loginLink={{
				name: m.header_create_page(),
				href: "/#demo",
			}}
		/>
	);
}