import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";

export type Props<Tag extends HTMLTag> = Polymorphic<{
	as: Tag;
	icon?: JSX.Element;
	pre?: JSX.Element;
	post?: JSX.Element;
	selected?: boolean;
}>;

export const NavbarItem = <T extends HTMLTag = "a">({
	children,
	as: Tag = "a" as T,
	icon,
	pre,
	post,
	selected,
	class: cls,
	...props
}: Props<T>) => (
	<Tag
		aria-current={selected ? "page" : undefined}
		class:list={["o-navbar__item", { "is-selected": selected }, cls]}
		role="menuitem"
		{...props}
	>
		{icon && <div class="o-navbar__item-label">{children}</div>}

		<div class="o-navbar__item-content">
			{pre} {icon ?? <span class="o-navbar__item-content-text">{children}</span>} {post}
		</div>
	</Tag>
);