import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { UIColorName } from '@/UI-kit/types';
import { UIColor } from '@/UI-kit/constants';
import UIImageWithLoader from '@/UI-kit/components/UI/image-with-loader/UIImageWithLoader.vue';

export default {
    title: 'UI/UIImageWithLoader',
    component: UIImageWithLoader,
    args: {
        src: 'https://picsum.photos/seed/rm-ui-kit/800/600',
        alt: 'Preview',
        openOnClick: true,
        loaderBorderColor: UIColorName.Blue500,
    },
} as Meta<typeof UIImageWithLoader>;

export const Default: StoryFn<typeof UIImageWithLoader> = (args) => ({
    components: { UIImageWithLoader },
    setup() {
        return { args, UIColor };
    },
    template: `
        <div style="width: 320px; aspect-ratio: 4/3;">
            <UIImageWithLoader
                v-bind="args"
                :loader-border-color="UIColor[args.loaderBorderColor]"
            />
        </div>
    `,
});
