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

	const { Story } = defineMeta({
		title: "UI/Scaffold",
		component: Scaffold,
		tags: ["autodocs"],
		argTypes: {
			width: {
				control: { type: "inline-radio" },
				options: ["lg", "xl", "full"]
			}
		},
		args: {
			width: "lg"
		}
	});
</script>

<!-- Scaffold content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="Default">
	<Scaffold>
		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
	</Scaffold>
</Story>

<Story name="Wide" args={{ width: "xl" }}>
	<Scaffold width="xl">
		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
	</Scaffold>
</Story>

<Story name="Full" args={{ width: "full" }}>
	<Scaffold width="full">
		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
	</Scaffold>
</Story>
