import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { UIColor } from '@/UI-kit/constants';
import UILoaderV2 from '@/UI-kit/components/UI/loader/UILoaderV2.vue';

export default {
    title: 'UI/UILoaderV2',
    component: UILoaderV2,
    argTypes: {
        title: { control: 'text' },
        subtitle: { control: 'text' },
    },
    args: {
        title: 'Загрузка',
        subtitle: 'Подождите немного',
    },
} as Meta<typeof UILoaderV2>;

export const Default: StoryFn<typeof UILoaderV2> = (args) => ({
    components: { UILoaderV2 },
    setup() {
        return { args };
    },
    template: `
        <div style="padding: 24px;">
            <UILoaderV2 v-bind="args" />
        </div>
    `,
});

export const SpinnerOnly: StoryFn<typeof UILoaderV2> = () => ({
    components: { UILoaderV2 },
    template: `
        <div style="padding: 24px;">
            <UILoaderV2 :title="null" :subtitle="null" />
        </div>
    `,
});

export const CustomSpinner: StoryFn<typeof UILoaderV2> = () => ({
    components: { UILoaderV2 },
    setup() {
        return { UIColor };
    },
    template: `
        <div style="padding: 24px;">
            <UILoaderV2
                title="Обновляем список"
                :spinner-style="{
                    size: '64',
                    color: UIColor['gray-100'],
                    activeColor: UIColor['blue-500'],
                }"
            />
        </div>
    `,
});
