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

export default {
    title: 'UI/UiInfo',
    component: UIInfo,
    argTypes: {
        text: {
            control: { type: 'text' },
        },
        color: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
        },
        bgColor: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
        },
    },
    args: {
        text: 'Пример описания с <b>HTML</b> поддержкой',
        color: UIColorName.Blue500,
        bgColor: UIColorName.Blue015,
    },
} as Meta<typeof UIInfo>;

export const Default: StoryFn<typeof UIInfo> = (args) => ({
    components: { UIInfo },
    setup() {
        return { args, UIColor };
    },
    template: `<UIInfo
                    v-bind="args"
                    :color="UIColor[args.color]"
                    :bg-color="UIColor[args.bgColor]"
                />`,
});
