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

const { Story } = defineMeta({
    title: 'Shared/SectionSeparator',
    component: SectionSeparator,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: { component: 'Full-width horizontal rule for separating page sections.' },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        class: {
            control: 'text',
            description: 'Additional CSS classes to merge onto the element',
        },
    },
});
</script>

<script lang="ts">
import type { ComponentProps } from 'svelte';
</script>

<Story name="Default/Basic" args={{}}>
    {#snippet template(args: ComponentProps<typeof SectionSeparator>)}
        <div class="w-96">
            <SectionSeparator {...args} />
        </div>
    {/snippet}
</Story>

<Story name="Custom class" args={{ class: 'my-4' }}>
    {#snippet template(args: ComponentProps<typeof SectionSeparator>)}
        <div class="w-96">
            <p class="text-sm text-neutral-500">Above</p>
            <SectionSeparator {...args} />
            <p class="text-sm text-neutral-500">Below</p>
        </div>
    {/snippet}
</Story>
