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

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

<script>
</script>

<Story name="Simple Panel">
	{#snippet children(args)}
		<BarbiTheme />
		<Panel {...args}>
			The most basic panel type
		</Panel>
		<Panel flat {...args}>
			A basic panel without shadow
		</Panel>
	{/snippet}
</Story>

<Story name="Sizable Panel">
	{#snippet children(args)}
		<BarbiTheme />
		<Panel space="none" {...args}>
			space="none"
		</Panel>
		<Panel space="sm" {...args}>
			space="sm"
		</Panel>
		<Panel space="md" {...args}>
			space="md"
		</Panel>
		<Panel space="lg" {...args}>
			space="lg"
		</Panel>
	{/snippet}
</Story>

<Story name="Coloured Panel">
	{#snippet children(args)}
		<BarbiTheme />
		<div class="storyboard-grid">
			<Panel variant="primary" {...args}>
				variant="primary"
			</Panel>
			<Panel variant="secondary" {...args}>
				variant="secondary"
			</Panel>
			<Panel variant="success" {...args}>
				variant="success"
			</Panel>
			<Panel variant="error" {...args}>
				variant="error"
			</Panel>
			<Panel variant="emphasis" {...args}>
				variant="emphasis"
			</Panel>
			<Panel variant="mustard" {...args}>
				variant="mustard"
			</Panel>
			<Panel variant="pastel" {...args}>
				variant="pastel"
			</Panel>
			<Panel variant="brick" {...args}>
				variant="brick"
			</Panel>
			<Panel variant="neon" {...args}>
				variant="neon"
			</Panel>
			<Panel variant="slate" {...args}>
				variant="slate"
			</Panel>
		</div>
	{/snippet}
</Story>

<Story name="Hover Effect Panel">
	{#snippet children(args)}
		<BarbiTheme />
		<Panel {...args} hover>
			hover={true}
		</Panel>
	{/snippet}
</Story>

<Story name="Press Effect Panel">
	{#snippet children(args)}
		<BarbiTheme />
		<Panel {...args} hover active>
			hover={true} active={true}
		</Panel>
		<Panel {...args} tag="button" hover active>
			hover={true} active={true}
		</Panel>
	{/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>