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

const { Story } = defineMeta({
    title: 'Shared/ControlGroup',
    component: ControlGroup,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: { component: 'Labelled section for grouping related sidebar controls, with a bottom border.' },
            story: { inline: false },
        },
        layout: 'padded',
    },
    argTypes: {
        label: {
            control: 'text',
            description: 'Uppercase label shown above the control content',
        },
        class: {
            control: 'text',
            description: 'Additional CSS classes',
        },
    },
});
</script>

<Story name="Default/Basic">
    {#snippet template()}
        <div class="w-64">
            <ControlGroup label="Font Size">
                <div class="text-sm text-neutral-500">Control content here</div>
            </ControlGroup>
        </div>
    {/snippet}
</Story>

<Story name="With form control">
    {#snippet template()}
        <div class="w-64">
            <ControlGroup label="Weight">
                <div class="flex gap-2">
                    <button class="px-3 py-1 text-xs border border-neutral-300 rounded">100</button>
                    <button class="px-3 py-1 text-xs border border-neutral-300 rounded">400</button>
                    <button class="px-3 py-1 text-xs border border-neutral-300 rounded bg-neutral-900 text-white">
                        700
                    </button>
                </div>
            </ControlGroup>
        </div>
    {/snippet}
</Story>
