<script module lang="ts">
import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right';
import { defineMeta } from '@storybook/addon-svelte-csf';
import type { ComponentProps } from 'svelte';
import Link from './Link.svelte';

const { Story } = defineMeta({
    title: 'Shared/Link',
    component: Link,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Styled link component based on the footer link design. Supports optional icon snippet and standard anchor attributes.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        href: {
            control: 'text',
            description: 'Link URL',
        },
    },
});
</script>

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

<Story
    name="With Icon"
    args={{
        href: 'https://fonts.google.com',
        target: '_blank',
    }}
>
    {#snippet template(args: ComponentProps<typeof Link>)}
        <Link {...args}>
            <span>Google Fonts</span>
            {#snippet icon()}
                <ArrowUpRightIcon
                    size={10}
                    class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
                />
            {/snippet}
        </Link>
    {/snippet}
</Story>

<Story name="Multiple Links">
    {#snippet template()}
        <div class="flex gap-4 p-8 bg-neutral-100 dark:bg-neutral-900 rounded-lg">
            <Link href="https://fonts.google.com" target="_blank">
                <span>Google Fonts</span>
                {#snippet icon()}
                    <ArrowUpRightIcon
                        size={10}
                        class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
                    />
                {/snippet}
            </Link>
            <Link href="https://www.fontshare.com" target="_blank">
                <span>Fontshare</span>
                {#snippet icon()}
                    <ArrowUpRightIcon
                        size={10}
                        class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
                    />
                {/snippet}
            </Link>
            <Link href="https://github.com" target="_blank">
                <span>GitHub</span>
                {#snippet icon()}
                    <ArrowUpRightIcon
                        size={10}
                        class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
                    />
                {/snippet}
            </Link>
        </div>
    {/snippet}
</Story>
