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

	const { Story } = defineMeta({
		title: "UI/ButtonGroup",
		component: ButtonGroup,
		tags: ["autodocs"],
		argTypes: {
			spaced: { control: "boolean" }
		},
		args: {
			spaced: false
		}
	});
</script>

<!-- ButtonGroup content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="Joined">
	<ButtonGroup>
		<Button>Button</Button>
		<Button>Button</Button>
		<Button>Button</Button>
	</ButtonGroup>
</Story>

<Story name="Spaced" args={{ spaced: true }}>
	<ButtonGroup spaced>
		<Button>Button</Button>
		<Button>Button</Button>
		<Button>Button</Button>
	</ButtonGroup>
</Story>

<Story name="Comparison">
	<div class="flex flex-col gap-4">
		<ButtonGroup spaced>
			<Button>Button</Button>
			<Button>Button</Button>
			<Button>Button</Button>
		</ButtonGroup>
		<ButtonGroup>
			<Button>Button</Button>
			<Button>Button</Button>
			<Button>Button</Button>
		</ButtonGroup>
	</div>
</Story>
