<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Section from "./Section.svelte";

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

{#snippet items()}
	<div class="rounded-sm border border-border-default p-4">First item</div>
	<div class="rounded-sm border border-border-default p-4">Second item</div>
	<div class="rounded-sm border border-border-default p-4">Third item</div>
{/snippet}

<Story name="Default" asChild>
	<Section title="Repositories" empty={false} emptyMessage="No repositories yet.">
		{@render items()}
	</Section>
</Story>

<!-- With `empty`, children are ignored and EmptyState renders with `emptyMessage`. -->
<Story name="Empty" asChild>
	<Section title="Repositories" empty emptyMessage="No repositories yet.">
		{@render items()}
	</Section>
</Story>

<Story name="Without title" asChild>
	<Section empty={false} emptyMessage="Nothing here.">
		{@render items()}
	</Section>
</Story>

<!-- `header` renders between the title and the list; `listClass` overrides the list layout. -->
<Story name="Header and custom list" asChild>
	<Section
		title="Pinned"
		empty={false}
		emptyMessage="Nothing pinned."
		listClass="grid grid-cols-2 gap-4"
	>
		{#snippet header()}
			<p class="px-2 pb-2 typography-paragraph-small text-foreground-subtle">Up to four pinned repositories.</p>
		{/snippet}
		{@render items()}
	</Section>
</Story>

<Story name="Footer" asChild>
	<Section title="Repositories" empty={false} emptyMessage="Nothing here.">
		{@render items()}
		{#snippet footer()}
			<div class="mt-4 flex justify-center typography-paragraph-small text-foreground-subtle">footer</div>
		{/snippet}
	</Section>
</Story>
