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

const { Story } = defineMeta({
    title: 'Shared/Footnote',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'Styles footnote text',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
});
</script>

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

<Story name="Default">
    {#snippet template(args: ComponentProps<typeof Footnote>)}
        <Footnote {...args}>
            Footnote
        </Footnote>
    {/snippet}
</Story>

<Story name="With custom render">
    {#snippet template(args: ComponentProps<typeof Footnote>)}
        <Footnote {...args}>
            {#snippet render({ class: className })}
                <span class={className}>Footnote</span>
            {/snippet}
        </Footnote>
    {/snippet}
</Story>
