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

	const { Story } = defineMeta({
		title: "UI/Button",
		component: Button,
		tags: ["autodocs"],
		argTypes: {
			variant: {
				control: { type: "select" },
				options: ["default", "primary", "ghost", "danger", "success", "warning"]
			},
			size: {
				control: { type: "inline-radio" },
				options: ["sm", "md", "lg"]
			},
			insetShadow: { control: "boolean" },
			disabled: { control: "boolean" },
			loading: { control: "boolean" }
		},
		args: {
			variant: "default",
			size: "md",
			insetShadow: false,
			disabled: false,
			loading: false
		}
	});
</script>

<!-- Button content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="Default">Button</Story>
<Story name="Primary" args={{ variant: "primary" }}>Save</Story>
<Story name="Ghost" args={{ variant: "ghost" }}>Cancel</Story>
<Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
<Story name="Success" args={{ variant: "success" }}>Confirm</Story>
<Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
<Story name="Loading" args={{ variant: "primary", loading: true }}>Saving</Story>
<Story name="Disabled" args={{ disabled: true }}>Button</Story>
<Story name="Link" args={{ href: "/" }}>Go home</Story>

<Story name="Inset shadow" asChild>
	<div class="flex items-center gap-3">
		<Button insetShadow>Button</Button>
		<Button variant="primary" insetShadow>Save</Button>
	</div>
</Story>

<Story name="Sizes" asChild>
	<div class="flex items-center gap-3">
		<Button size="sm">Small</Button>
		<Button size="md">Medium</Button>
		<Button size="lg">Large</Button>
	</div>
</Story>
