import { Icon } from "$/ui/objects/Icon.tsx";

import { nav } from "../../data/nav.ts";
import { Navbar } from "../objects/Navbar.tsx";
import { NavbarItem } from "../objects/NavbarItem.tsx";

export interface Props {
	url: string;
}

export const SiteNav = ({ url }: Props) => {
	const navItems = nav
		.filter((item) => !item.hidden)
		.map((item) => ({
			...item,
			selected: item.url === "/" ? item.url === url : new RegExp(`^${item.url}`).test(url),
		}));

	return (
		<>
			<div class="c-site-nav-placeholder"></div>

			<footer class="c-site-nav">
				<Navbar aria-label="Mainmenu" quiet variant="static-white">
					{navItems.map((item) => (
						<NavbarItem
							href={item.url}
							icon={<Icon icon={item.icon} variant={item.selected ? "fill" : "regular"} />}
							selected={item.selected}
						>
							{item.label}
						</NavbarItem>
					))}
				</Navbar>
			</footer>
		</>
	);
};