import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { ref } from 'vue';
import UIRadio from '@/UI-kit/components/UI/radio/UIRadio.vue';

export default {
    title: 'UI/UIRadio',
    component: UIRadio,
    argTypes: {
        modelValue: { control: false },
        name: { control: 'text' },
        options: {
            control: 'object',
        },
    },
} as Meta<typeof UIRadio>;

export const Default: StoryFn<typeof UIRadio> = (args) => ({
    components: { UIRadio },
    setup() {
        const value = ref(args.modelValue);

        return {
            args,
            value,
        };
    },
    template: `
        <UIRadio
            v-bind="args"
            :modelValue="value"
            @update:modelValue="value = $event"
        />
        <p>Selected: {{ value }}</p>
    `,
});

Default.args = {
    modelValue: 'option1',
    name: 'example-group',
    options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
    ],
};
