"use client";

import type { ContainerProps } from "@zexon/ui/components/container";
import { Container } from "@zexon/ui/components/container";
import { cn } from "@zexon/ui/lib/utils";
import type * as React from "react";

export interface LPNavbarLink {
	label: string;
	href: string;
}

export interface LPNavbarProps extends React.ComponentProps<"header"> {
	/** Marca ou logótipo (esquerda). */
	logo: React.ReactNode;
	/** Ligações de navegação (visíveis em `md+`). */
	links?: LPNavbarLink[];
	/** Ações à direita (CTA, tema, etc.). */
	trailing?: React.ReactNode;
	/** Conteúdo só em ecrãs pequenos (ex.: botão de menu); à direita do logo. */
	mobileNav?: React.ReactNode;
	/** Props adicionais para `Container` (exceto `children`). */
	containerProps?: Omit<ContainerProps, "children">;
	/** Classe da faixa interior (padding, alinhamento). */
	contentClassName?: string;
	/** `aria-label` do `<nav>` dos links. */
	navLabel?: string;
}

const linkClassName =
	"cursor-pointer rounded px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground";

export function LPNavbar({
	logo,
	links = [],
	trailing,
	mobileNav,
	containerProps,
	contentClassName,
	navLabel = "Principal",
	className,
	...props
}: LPNavbarProps) {
	return (
		<header
			data-slot="lp-navbar"
			className={cn(
				"sticky top-0 z-40 w-full min-w-0 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80",
				className,
			)}
			{...props}
		>
			<Container {...containerProps}>
				<div
					className={cn(
						"flex min-h-14 min-w-0 w-full items-center justify-between gap-3 px-4 py-3 md:gap-6 md:px-6",
						contentClassName,
					)}
				>
					<div className="flex min-w-0 flex-1 items-center gap-4 md:gap-8">
						<div className="shrink-0">{logo}</div>
						{mobileNav ? (
							<div className="flex md:hidden">{mobileNav}</div>
						) : null}
						{links.length > 0 ? (
							<nav
								className="hidden min-w-0 items-center gap-1 md:flex"
								aria-label={navLabel}
							>
								{links.map((item) => (
									<a
										key={item.href + item.label}
										href={item.href}
										className={linkClassName}
									>
										{item.label}
									</a>
								))}
							</nav>
						) : null}
					</div>
					{trailing ? (
						<div className="flex shrink-0 items-center gap-2">{trailing}</div>
					) : null}
				</div>
			</Container>
		</header>
	);
}