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

	const { Story } = defineMeta({
		title: 'Components/Patterns/Checkerboard',
		component: CheckerboardPattern,
		// tags: ['autodocs'],
		argTypes: {
			scale: { name: 'Scale', control: 'number' },
			scrollDirection: { name: 'Scroll Direction', control: 'radio', options: [null, 'up-left'] },
		},
		args: {
			scale: 1,
		}
	});
</script>

<script>
</script>

<Story name="Default Pattern">
	{#snippet children(args)}
		<BarbiTheme />
		<CheckerboardPattern {...args} />
	{/snippet}
</Story>

<Story
	name="Modified Colours"
	args={{ style: '--pattern-light: #ECA400; --pattern-dark: #27476E;', scale: 2 }}
>
	{#snippet children(args)}
		<BarbiTheme />
		<CheckerboardPattern {...args} />
	{/snippet}
</Story>

<Story
	name="Scaled Pattern"
	args={{ scale: 4 }}
>
	{#snippet children(args)}
		<BarbiTheme />
		<CheckerboardPattern {...args} />
	{/snippet}
</Story>

<Story
	name="Scrolling Pattern"
	args={{ scale: 4, scrollDirection: 'up-left' }}
>
	{#snippet children(args)}
		<BarbiTheme />
		<CheckerboardPattern {...args} />
	{/snippet}
</Story>