<script module>
	import { BarbiTheme, Button } from '$lib';
	import { defineMeta } from '@storybook/addon-svelte-csf';

	const { Story } = defineMeta({
		title: 'Components/Atoms/Button',
		component: Button,
	});
</script>

<Story name="Simple Button">
	{#snippet children(args)}
		<BarbiTheme />
		<Button {...args}>Click Me</Button>
	{/snippet}
</Story>

<Story name="Button Variants">
	{#snippet children(args)}
		<BarbiTheme />

		<div class="storyboard-grid">
			<Button {...args} variant="primary">Primary</Button>
			<Button {...args} variant="secondary">Secondary</Button>
			<Button {...args} variant="success">Success</Button>
			<Button {...args} variant="error">Error</Button>
		</div>
	{/snippet}
</Story>

<Story name="Link Button">
	{#snippet children(args)}
		<BarbiTheme />
		<Button href="https://example.com" {...args}>I have a href</Button>
	{/snippet}
</Story>

<Story name="Disabled Button">
	{#snippet children(args)}
		<BarbiTheme />
		<Button disabled {...args}>You cant click me</Button>
	{/snippet}
</Story>

<Story name="Invisible Button">
	{#snippet children(args)}
		<BarbiTheme />
		<p>There is a button on this page, but you can't see it. Use the `placeholder` prop to create a button that occupies only vertical space,
			with no interaction available. Useful for reserving space.</p>
		<Button placeholder {...args}>You aren't able to see this button at all!</Button>
	{/snippet}
</Story>

<style>
	.storyboard-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
			grid-auto-rows: max-content;
			gap: var(--spacing-md);
	}
</style>