import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { UIEmpty, UIButton } from '@/index';

export default {
    title: 'UI/UIEmpty',
    component: UIEmpty,
    argTypes: {
        title: { control: { type: 'text' } },
        text: { control: { type: 'text' } },
        btnText: { control: { type: 'text' } },
        maxWidth: { control: { type: 'text' } },
        iconUrl: { control: { type: 'text' } },
    },
    args: {
        title: 'Ничего не найдено',
        text: 'Попробуй изменить запрос или проверь позже.',
        btnText: '',
        maxWidth: '291px',
        iconUrl: '/icon/rm-light.svg',
    },
} as Meta<typeof UIEmpty>;

export const Default: StoryFn<typeof UIEmpty> = (args) => ({
    components: { UIEmpty },
    setup() {
        return { args };
    },
    template: `<UIEmpty v-bind="args" />`,
});

export const WithButton: StoryFn<typeof UIEmpty> = (args) => ({
    components: { UIEmpty },
    setup() {
        const onClick = () => alert('click'); // storybook demo
        return { args, onClick };
    },
    template: `<UIEmpty v-bind="args" btn-text="Обновить" @click="onClick" />`,
});

export const CustomIconSlot: StoryFn<typeof UIEmpty> = (args) => ({
    components: { UIEmpty, UIButton },
    setup() {
        return { args };
    },
    template: `<UIEmpty v-bind="args">
        <template #icon>
            <div style="width:76px;height:76px;border-radius:16px;background:#EAF2FF;display:flex;align-items:center;justify-content:center;">
                <span style="font-size:28px;font-weight:700;color:#0579EE;">RM</span>
            </div>
        </template>
    </UIEmpty>`,
});

