import type { HTMLAttributes } from "corvos/plugins/jsx.ts";

export type Props = HTMLAttributes<"nav"> & {
	"variant"?: "accent";
	"quiet"?: boolean;
	"adapt"?: boolean;
	"tabs-class"?: unknown;
};

export const Tabbar = ({
	children,
	variant,
	quiet,
	adapt,
	"tabs-class": tabsClass,
	class: cls,
	...props
}: Props) => (
	<nav
		class:list={[
			"o-tabbar",
			{
				[`o-tabbar--${variant}`]: variant,
				"o-tabbar--quiet": quiet,
				"o-tabbar--adapt": adapt,
			},
			"js-keyboard-nav",
			cls,
		]}
		data-keyboard-nav-item=".o-tabbar__tab"
		data-keyboard-nav-mode="nav"
		{...props}
	>
		<div
			aria-label={props["aria-label"]}
			aria-orientation="horizontal"
			class:list={["o-tabbar__tabs", tabsClass]}
			role="tablist"
		>
			{children}
		</div>
	</nav>
);