<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import Divider from './Divider.svelte';

const { Story } = defineMeta({
    title: 'Shared/Divider',
    component: Divider,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: '1px separator line, horizontal or vertical.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        orientation: {
            control: 'select',
            options: ['horizontal', 'vertical'],
            description: 'Divider orientation',
            defaultValue: 'horizontal',
        },
    },
});
</script>

<Story
    name="Horizontal"
    args={{ orientation: 'horizontal' }}
>
    {#snippet template()}
        <div class="flex flex-col gap-4 w-full max-w-md">
            <div class="text-sm">Content above divider</div>
            <Divider orientation="horizontal" />
            <div class="text-sm">Content below divider</div>
        </div>
    {/snippet}
</Story>

<Story
    name="Vertical"
    args={{ orientation: 'vertical' }}
>
    {#snippet template()}
        <div class="flex items-center gap-4 h-24">
            <div class="text-sm">Left content</div>
            <Divider orientation="vertical" />
            <div class="text-sm">Right content</div>
        </div>
    {/snippet}
</Story>
