<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import TabPanel from "./TabPanel.svelte";
	import Tabs from "./Tabs.svelte";
	import SquareChartGantt from "$icon/square-chart-gantt";
	import CircleDot from "$icon/circle-dot";
	import GitPullRequest from "$icon/git-pull-request";

	const tabs = [
		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: "#" },
		{ id: "issues", label: "Issues", icon: CircleDot, count: 7, href: "#" },
		{ id: "pulls", label: "Pulls", icon: GitPullRequest, href: "#" }
	];

	const { Story } = defineMeta({
		title: "UI/TabPanel",
		component: TabPanel,
		tags: ["autodocs"]
	});
</script>

<Story name="Default" asChild>
	<div class="mx-auto max-w-screen-lg">
		<Tabs {tabs} active="overview" label="example sections" />
		<TabPanel>
			<p>The active tab's bottom edge merges into this panel — one continuous outline.</p>
		</TabPanel>
	</div>
</Story>

<Story name="Second tab active" asChild>
	<div class="mx-auto max-w-screen-lg">
		<Tabs {tabs} active="issues" label="example sections" />
		<TabPanel>
			<p>"Issues" is active now, and the seam moves with it.</p>
		</TabPanel>
	</div>
</Story>

<Story name="Custom padding" asChild>
	<div class="mx-auto max-w-screen-lg">
		<Tabs {tabs} active="overview" label="example sections" />
		<TabPanel class="py-6">
			<p>Roomier vertical padding (py-6) for form-heavy pages.</p>
		</TabPanel>
	</div>
</Story>

<Story name="Unpadded grid" asChild>
	<div class="mx-auto max-w-screen-lg">
		<Tabs {tabs} active="overview" label="example sections" />
		<TabPanel as="div" padded={false} class="grid md:grid-cols-3 md:gap-4 md:p-6">
			<div class="p-6 md:p-0">Sidebar</div>
			<div class="border-t border-border-default p-6 md:col-span-2 md:border-t-0 md:p-0">
				Main content laid out by the caller.
			</div>
		</TabPanel>
	</div>
</Story>
