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 SideNavItem = <T extends HTMLTag = "a">({
	children,
	as: Tag = "a" as T,
	icon,
	pre,
	post,
	selected,
	class: cls,
	...props
}: Props<T>) => (
	<Tag
		aria-current={selected ? "location" : undefined}
		class:list={["o-side-nav__item", { "is-selected": selected }, cls]}
		role="menuitem"
		{...props}
	>
		{icon && <div class="l-media__block o-side-nav__icon-slot">{icon}</div>}

		<div class="l-media__block l-media__block--main">
			{pre} {children} {post}
		</div>
	</Tag>
);