<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Button from "./Button.svelte";
	import ButtonGroup, { segmentProps } 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>

<!--
	The tab/segment-switcher recipe (Open/Closed issue filters, Write/Preview editor tabs):
	the selected segment gets the `default` variant + insetShadow, unselected segments are
	`ghost`. Never plain `default` for unselected — that reads as the hovered state.
-->
<Story name="Tab Switcher">
	<div class="flex flex-col items-start gap-4">
		<ButtonGroup>
			<Button {...segmentProps(true)}>Open</Button>
			<Button {...segmentProps(false)}>Closed</Button>
		</ButtonGroup>
		<!-- selected in the middle: hovering either neighbour used to rub out the border on the
		     edge they share, so this is the case to check when touching the group's layering -->
		<ButtonGroup>
			<Button {...segmentProps(false)}>All</Button>
			<Button {...segmentProps(true)}>Push</Button>
			<Button {...segmentProps(false)}>Pull request</Button>
		</ButtonGroup>
	</div>
</Story>
