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

const { Story } = defineMeta({
    title: 'Shared/ComboControlV2',
    component: ComboControlV2,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'ComboControl with input field and slider',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    argTypes: {
        orientation: {
            control: 'select',
            options: ['horizontal', 'vertical'],
            description: 'Orientation of the ComboControl',
            defaultValue: 'vertical',
        },
        label: {
            control: 'text',
            description: 'Label for the ComboControl',
        },
    },
});
</script>

<script lang="ts">
const control = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
</script>

<Story name="Horizontal" args={{ orientation: 'horizontal', control }}>
    <ComboControlV2 control={control} orientation="horizontal" />
</Story>

<Story name="Vertical" args={{ orientation: 'vertical', control, class: 'h-48' }}>
    <ComboControlV2 control={control} orientation="vertical" />
</Story>
