<script module lang="ts">
	import type { Component } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";

	export interface TabDef {
		id: string;
		label: string;
		href: string;
		icon?: Component<SvelteHTMLElements["svg"]>;
		count?: number;
	}
</script>

<script lang="ts">
	import { resolve } from "$app/paths";

	interface Props {
		tabs: TabDef[];
		active: string;
		label?: string;
	}

	let { tabs, active, label }: Props = $props();
</script>

<nav class="w-full overflow-x-auto overflow-y-hidden pl-4" aria-label={label}>
	<div class="flex">
		{#each tabs as tab (tab.id)}
			{@const isActive = active === tab.id}
			{@const Glyph = tab.icon}
			<a
				href={resolve(tab.href as "/")}
				class="group relative -mr-px no-underline hover:no-underline"
				aria-current={isActive ? "page" : undefined}
			>
				<div
					class={`relative mr-1 min-w-[80px] rounded-t px-4 py-1 text-center whitespace-nowrap text-foreground-default ${
						isActive
							? "-mb-px bg-background-default font-medium"
							: "group-hover:bg-background-inset/25"
					}`}
				>
					<span class="flex items-center justify-center">
						{#if Glyph}
							<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
						{/if}
						{tab.label}
						{#if tab.count}
							<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
						{/if}
					</span>
				</div>
			</a>
		{/each}
	</div>
</nav>
