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

export default {
    title: 'UI/UiChip',
    component: UIChip,
    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,
        icon: UIIcons.Clock,
    },
} as Meta<typeof UIChip>;

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