import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { UISwiper } from '@/index';
import { UIColor } from '@/UI-kit/constants';
import { Swiper, SwiperSlide } from 'swiper/vue';

export default {
    title: 'UI/UISwiper',
    component: UISwiper,
    argTypes: {
        list: {
            control: { type: 'object' },
        },
    },
    args: {
        list: [1, 2, 3, 4],
    },
} as Meta<typeof UISwiper>;

export const DefaultSwiper: StoryFn<typeof UISwiper> = (args) => ({
    components: { UISwiper, Swiper, SwiperSlide },
    setup() {
        return { args, UIColor, Swiper, SwiperSlide };
    },
    template: `<div style="width: 320px;">
        <UISwiper v-bind="args">
            <template #default="{ item }">
                <div style="width: 320px; height: 200px; background: tomato;">
                    {{ item }}
                </div>
            </template>
        </UISwiper>
    </div>`,
});
