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

	const { Story } = defineMeta({
		title: "UI/Toggle",
		component: Toggle,
		tags: ["autodocs"],
		argTypes: {
			checked: { control: "boolean" },
			disabled: { control: "boolean" },
			layout: { control: "inline-radio", options: ["inline", "block"] }
		},
		args: {
			checked: false,
			disabled: false,
			layout: "inline"
		}
	});
</script>

<!-- Toggle content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="Default">Label</Story>
<Story name="Checked" args={{ checked: true }}>Label</Story>
<Story name="Disabled" args={{ disabled: true }}>Label</Story>
<Story name="Disabled checked" args={{ disabled: true, checked: true }}>Label</Story>

<Story name="Without label" />

<Story name="States">
	<div class="flex flex-col gap-3">
		<Toggle>Unchecked</Toggle>
		<Toggle checked>Checked</Toggle>
		<Toggle disabled>Disabled</Toggle>
		<Toggle disabled checked>Disabled checked</Toggle>
	</div>
</Story>

<Story name="Block layout">
	<div class="flex w-64 flex-col gap-3">
		<Toggle layout="block">Label pushed to the far edge</Toggle>
		<Toggle layout="block" checked>Another one, wrapping when the text runs long</Toggle>
	</div>
</Story>
