<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';
import type { ComponentProps } from 'svelte';
import FooterLink from './FooterLink.svelte';

const { Story } = defineMeta({
    title: 'Shared/FooterLink',
    component: FooterLink,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'Standard footer link with arrow icon and hover effects.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        text: {
            control: 'text',
            description: 'Link text',
        },
        href: {
            control: 'text',
            description: 'Link URL',
        },
    },
});
</script>

<Story
    name="Default"
    args={{
        text: 'Google Fonts',
        href: 'https://fonts.google.com',
        target: '_blank',
    }}
>
    {#snippet template(args: ComponentProps<typeof FooterLink>)}
        <FooterLink {...args} />
    {/snippet}
</Story>

<Story name="Multiple Links">
    {#snippet template()}
        <div class="flex gap-4 p-8 bg-neutral-100 dark:bg-neutral-900 rounded-lg">
            <FooterLink text="Google Fonts" href="https://fonts.google.com" target="_blank" />
            <FooterLink text="Fontshare" href="https://www.fontshare.com" target="_blank" />
            <FooterLink text="GitHub" href="https://github.com" target="_blank" />
        </div>
    {/snippet}
</Story>
