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

const { Story } = defineMeta({
    title: 'Shared/StatusIndicator',
    component: StatusIndicator,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'Coloured dot with optional label. Dot can pulse for live states.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        status: {
            control: 'select',
            options: ['active', 'inactive', 'warning', 'error'],
            description: 'Status type',
        },
        label: {
            control: 'text',
            description: 'Optional label text',
        },
        pulse: {
            control: 'boolean',
            description: 'Enable pulsing animation',
            defaultValue: false,
        },
    },
});
</script>

<Story
    name="Active status"
    args={{ status: 'active', label: 'Active' }}
>
    {#snippet template()}
        <StatusIndicator status="active" label="Active" />
    {/snippet}
</Story>

<Story
    name="Inactive status"
    args={{ status: 'inactive', label: 'Inactive' }}
>
    {#snippet template()}
        <StatusIndicator status="inactive" label="Inactive" />
    {/snippet}
</Story>

<Story
    name="Warning status"
    args={{ status: 'warning', label: 'Warning' }}
>
    {#snippet template()}
        <StatusIndicator status="warning" label="Warning" />
    {/snippet}
</Story>

<Story
    name="Error status"
    args={{ status: 'error', label: 'Error' }}
>
    {#snippet template()}
        <StatusIndicator status="error" label="Error" />
    {/snippet}
</Story>

<Story
    name="With pulse"
    args={{ status: 'active', label: 'Connected', pulse: true }}
>
    {#snippet template()}
        <StatusIndicator status="active" label="Connected" pulse={true} />
    {/snippet}
</Story>
