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

const { Story } = defineMeta({
    title: 'Shared/StatGroup',
    component: StatGroup,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: { component: 'Horizontal row of Stat items with automatic separators between them.' },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        stats: {
            control: 'object',
            description: 'Array of stat items with label, value, and optional variant',
        },
        class: {
            control: 'text',
            description: 'Additional CSS classes',
        },
    },
});
</script>

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

<Story name="Default/Basic" args={{ stats: [{ label: 'Size', value: '16px' }, { label: 'Weight', value: 400 }] }}>
    {#snippet template(args: ComponentProps<typeof StatGroup>)}
        <StatGroup {...args} />
    {/snippet}
</Story>

<Story
    name="Three stats"
    args={{ stats: [{ label: 'Size', value: '24px' }, { label: 'Weight', value: 700 }, { label: 'Line height', value: 1.5 }] }}
>
    {#snippet template(args: ComponentProps<typeof StatGroup>)}
        <StatGroup {...args} />
    {/snippet}
</Story>

<Story name="Single stat" args={{ stats: [{ label: 'Style', value: 'Italic' }] }}>
    {#snippet template(args: ComponentProps<typeof StatGroup>)}
        <StatGroup {...args} />
    {/snippet}
</Story>
