<script module>
import { createTypographyControl } from '$shared/lib';
import { defineMeta } from '@storybook/addon-svelte-csf';
import ComboControl from './ComboControl.svelte';

const { Story } = defineMeta({
    title: 'Shared/ComboControl',
    tags: ['autodocs'],
    parameters: {
        docs: {
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
});
</script>

<script lang="ts">
const defaultControl = createTypographyControl({ value: 77, min: 0, max: 100, step: 1 });
const atMinimumControl = createTypographyControl({ value: 0, min: 0, max: 100, step: 1 });
const atMaximumControl = createTypographyControl({ value: 100, min: 0, max: 100, step: 1 });
const withFloatControl = createTypographyControl({ value: 77.5, min: 0, max: 100, step: 0.1 });
</script>

<Story name="Default">
    <ComboControl control={defaultControl} />
</Story>

<Story name="At Minimum">
    <ComboControl control={atMinimumControl} />
</Story>

<Story name="At Maximum">
    <ComboControl control={atMaximumControl} />
</Story>

<Story name="With Float">
    <ComboControl control={withFloatControl} />
</Story>
