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

export default {
    title: 'UI/UICard',
    component: UICard,
    argTypes: {
        isBoxShadow: {
            control: { type: 'boolean' },
        },
        isBorder: {
            control: { type: 'boolean' },
        },
        bgColor: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
        },
        color: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
        },
        borderRadius: {
            control: { type: 'text' },
        },
        border: {
            control: { type: 'text' },
        },
    },
    args: {
        bgColor: UIColorName.Blue500,
        color: UIColorName.White,
        isBoxShadow: true,
        isBorder: true,
        borderRadius: '12px',
        padding: '12px',
    },
} as Meta<typeof UICard>;

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