import type { Meta, StoryFn } from '@storybook/vue3-vite';
import SvgIcon from './UISvgIcon.vue';
import { UIColorName } from '@/UI-kit/types';
import { UIIcons, UIColor } from '@/UI-kit/constants';
import {Close} from "@/UI-kit/components/icons";

export default {
    title: 'UI/SvgIcon',
    component: SvgIcon,
    argTypes: {
        name: {
            control: { type: 'select' },
            options: Object.keys(UIIcons),
            description: 'Имя иконки, соответствует имени SVG файла',
        },
        color: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
            description: 'Цвет иконки из UISvgIconColorFill || UISvgIconColorStroke',
        },
    },
    args: {
        name: UIIcons.Close,
        iconColorStroke: UIColorName.Black,
        iconColorFill: UIColorName.Black,
    },
} as Meta<typeof SvgIcon>;

export const Default: StoryFn<typeof SvgIcon> = (args) => ({
    components: { SvgIcon },
    setup() {
        return { args, UIColor };
    },
    template: `<SvgIcon v-bind="args" :icon-color-stroke="UIColor[args.iconColorStroke]" :icon-color-fill="UIColor[args.iconColorFill]" />`,
});
