import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { UISize, UIColorName } from '@/UI-kit/types';
import { UILoader } from '@/index';
import { UIColor } from '@/UI-kit/constants';

export default {
    title: 'UI/UILoader',
    component: UILoader,
    argTypes: {
        size: {
            control: { type: 'select' },
            options: Object.values(UISize),
        },
        borderColor: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
        },
    },
    args: {
        size: UISize.M,
        borderColor: UIColorName.Blue500,
    },
} as Meta<typeof UILoader>;

export const DefaultLoader: StoryFn<typeof UILoader> = (args) => ({
    components: { UILoader },
    setup() {
        return { args, UIColor };
    },
    template: `
        <UILoader v-bind="args" :border-color="UIColor[args.borderColor]" />
    `,
});
