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

const { Story } = defineMeta({
    title: 'Shared/TechText',
    component: TechText,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'Monospace <code> element for technical values, measurements, identifiers.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        variant: {
            control: 'select',
            options: ['default', 'accent', 'muted', 'success', 'warning', 'error'],
            description: 'Text variant',
            defaultValue: 'muted',
        },
        size: {
            control: 'select',
            options: ['xs', 'sm', 'md'],
            description: 'Text size',
            defaultValue: 'sm',
        },
    },
});
</script>

<Story
    name="Default variant"
    args={{ variant: 'default', size: 'sm' }}
>
    {#snippet template()}
        <TechText variant="default" size="sm">0x1F4A9</TechText>
    {/snippet}
</Story>

<Story
    name="Accent variant"
    args={{ variant: 'accent', size: 'sm' }}
>
    {#snippet template()}
        <TechText variant="accent" size="sm">0x1F4A9</TechText>
    {/snippet}
</Story>

<Story
    name="Muted variant"
    args={{ variant: 'muted', size: 'sm' }}
>
    {#snippet template()}
        <TechText variant="muted" size="sm">0x1F4A9</TechText>
    {/snippet}
</Story>

<Story
    name="Success variant"
    args={{ variant: 'success', size: 'sm' }}
>
    {#snippet template()}
        <TechText variant="success" size="sm">0x1F4A9</TechText>
    {/snippet}
</Story>

<Story
    name="Warning variant"
    args={{ variant: 'warning', size: 'sm' }}
>
    {#snippet template()}
        <TechText variant="warning" size="sm">0x1F4A9</TechText>
    {/snippet}
</Story>

<Story
    name="Error variant"
    args={{ variant: 'error', size: 'sm' }}
>
    {#snippet template()}
        <TechText variant="error" size="sm">0x1F4A9</TechText>
    {/snippet}
</Story>

<Story name="All sizes">
    {#snippet template()}
        <div class="flex flex-col gap-2">
            <TechText variant="default" size="xs">XS: font-family-16px</TechText>
            <TechText variant="default" size="sm">SM: font-family-16px</TechText>
            <TechText variant="default" size="md">MD: font-family-16px</TechText>
        </div>
    {/snippet}
</Story>
