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

export default {
    title: 'UI/UISegment',
    component: UISegment,
} as Meta<typeof UISegment>;

const defaultOptions = [
    { value: 'all', label: 'Все' },
    { value: 'mine', label: 'Мои объявления' },
    { value: 'favorites', label: 'Избранное' },
] as const;

export const Default: StoryFn<typeof UISegment> = () => ({
    components: { UISegment },
    setup() {
        const tab = ref<string | number>('all');
        return { tab, options: defaultOptions, wrapForValues: ['mine'] as const };
    },
    template: `
        <div style="max-width: 400px; padding: 16px;">
            <UISegment v-model="tab" :options="options" :wrap-for-values="wrapForValues" />
            <p style="margin-top: 12px; font-size: 13px; color: var(--gray-600);">Выбрано: {{ tab }}</p>
        </div>
    `,
});

export const TwoTabs: StoryFn<typeof UISegment> = () => ({
    components: { UISegment },
    setup() {
        const tab = ref('published');
        const options = [
            { value: 'published', label: 'Опубликованные' },
            { value: 'pending', label: 'На проверке' },
        ];
        return { tab, options };
    },
    template: `
        <div style="max-width: 360px; padding: 16px;">
            <UISegment v-model="tab" :options="options" />
        </div>
    `,
});
