import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { ref } from 'vue';
import { UIIcons } from '@/UI-kit/constants';
import UIDetailActionsSheet from './UIDetailActionsSheet.vue';

export default {
    title: 'UI/UIDetailActionsSheet',
    component: UIDetailActionsSheet,
} as Meta<typeof UIDetailActionsSheet>;

export const Default: StoryFn<typeof UIDetailActionsSheet> = () => ({
    components: { UIDetailActionsSheet },
    setup() {
        const open = ref(true);
        const actions = [
            { id: 'share', label: 'Поделиться', icon: UIIcons.Clip },
            { id: 'report', label: 'Пожаловаться', icon: UIIcons.Warn, danger: true },
            { id: 'delete', label: 'Удалить', icon: UIIcons.Trash, danger: true },
        ];
        return { open, actions };
    },
    template: `
        <div style="padding: 16px">
            <button type="button" @click="open = true">Открыть шит</button>
            <UIDetailActionsSheet
                v-model="open"
                :actions="actions"
                cancel-label="Отмена"
            />
        </div>
    `,
});
