<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Tabs from "./Tabs.svelte";
	import BookMarked from "$icon/book-marked";
	import Star from "$icon/star";
	import SquareChartGantt from "$icon/square-chart-gantt";

	const tabs = [
		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: "#" },
		{ id: "repos", label: "Repositories", icon: BookMarked, count: 12, href: "#" },
		{ id: "starred", label: "Starred", icon: Star, count: 3, href: "#" }
	];

	const plainTabs = [
		{ id: "open", label: "Open", count: 4, href: "#" },
		{ id: "closed", label: "Closed", count: 28, href: "#" }
	];

	const { Story } = defineMeta({
		title: "UI/Tabs",
		component: Tabs,
		tags: ["autodocs"],
		args: {
			tabs,
			active: "overview"
		}
	});
</script>

<Story name="Default" />
<Story name="SecondActive" args={{ active: "repos" }} />
<Story name="WithoutIcons" args={{ tabs: plainTabs, active: "open" }} />
<!-- the vertical variant is the settings sidebar shape: it stretches to its container
     rather than hugging its items, so the stories give it a tall narrow box -->
<Story name="Vertical" args={{ vertical: true }}>
	{#snippet template(args)}
		<div class="flex h-80 w-44 items-stretch">
			<Tabs {...args} />
		</div>
	{/snippet}
</Story>

<Story name="VerticalSecondActive" args={{ vertical: true, active: "repos" }}>
	{#snippet template(args)}
		<div class="flex h-80 w-44 items-stretch">
			<Tabs {...args} />
		</div>
	{/snippet}
</Story>
