import type { Meta, StoryFn } from '@storybook/vue3-vite';
import UIBlockImageGallery from '@/UI-blocks/components/ImageGallery/UIBlockImageGallery.vue';

const DEMO_SLIDES = [
    {
        key: 1,
        src: 'https://picsum.photos/seed/gallery1/800/600',
        alt: 'Slide 1',
    },
    {
        key: 2,
        src: 'https://picsum.photos/seed/gallery2/800/600',
        alt: 'Slide 2',
    },
    {
        key: 3,
        src: 'https://picsum.photos/seed/gallery3/800/600',
        alt: 'Slide 3',
    },
];

export default {
    title: 'UIBlock/UIBlockImageGallery',
    component: UIBlockImageGallery,
    argTypes: {
        aspectRatio: { control: 'text' },
        slideHeight: { control: 'text' },
        width: { control: 'text' },
        variant: {
            control: 'select',
            options: ['default', 'full'],
        },
    },
    args: {
        list: DEMO_SLIDES,
        aspectRatio: '4 / 3',
        slideHeight: '',
        width: '100%',
        pagination: true,
    },
} as Meta<typeof UIBlockImageGallery>;

export const Default: StoryFn<typeof UIBlockImageGallery> = (args) => ({
    components: { UIBlockImageGallery },
    setup() {
        return { args };
    },
    template: `<div style="max-width: 375px; margin: 0 auto;"><UIBlockImageGallery v-bind="args" /></div>`,
});

export const FixedHeight: StoryFn<typeof UIBlockImageGallery> = (args) => ({
    components: { UIBlockImageGallery },
    setup() {
        return {
            args: {
                ...args,
                slideHeight: '220px',
                aspectRatio: 'auto',
            },
        };
    },
    template: `<div style="max-width: 375px; margin: 0 auto;"><UIBlockImageGallery v-bind="args" /></div>`,
});
