<script setup lang="ts">
import KanbanColumn from './KanbanColumn.vue';
import { LEAD_STATUSES } from '../../composables/leadStatuses';
import { MOCK_DEALS } from '../../composables/mockDeals';

const newStatus = LEAD_STATUSES.find((s) => s.slug === 'new')!;
const wonStatus = LEAD_STATUSES.find((s) => s.slug === 'won')!;
const newDeals = MOCK_DEALS.filter((d) => d.statusSlug === 'new');
const wonDeals = MOCK_DEALS.filter((d) => d.statusSlug === 'won');
</script>

<template>
    <Story title="Kanban / KanbanColumn" :layout="{ type: 'single', iframe: true }">
        <Variant title="«Новые» (1 сделка)">
            <v-app>
                <v-main class="story-pane">
                    <KanbanColumn :status="newStatus" :deals="newDeals" />
                </v-main>
            </v-app>
        </Variant>

        <Variant title="«Сделка» (2 сделки)">
            <v-app>
                <v-main class="story-pane">
                    <KanbanColumn :status="wonStatus" :deals="wonDeals" />
                </v-main>
            </v-app>
        </Variant>

        <Variant title="пустая колонка">
            <v-app>
                <v-main class="story-pane">
                    <KanbanColumn :status="newStatus" :deals="[]" />
                </v-main>
            </v-app>
        </Variant>
    </Story>
</template>

<style scoped>
.story-pane {
    background: #f6f3ec;
    min-height: 100vh;
    padding: 24px;
    display: flex;
    height: 600px;
}
</style>
