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

const open1 = ref(true);
const open2 = ref(true);

const dealNew = MOCK_DEALS.find((d) => d.statusSlug === 'new')!;
const dealWon = MOCK_DEALS.find((d) => d.statusSlug === 'won')!;
</script>

<template>
    <Story title="Deals / DealDetailDrawer" :layout="{ type: 'single', iframe: true }">
        <Variant title="default (status=new)">
            <v-app>
                <v-main class="story-main">
                    <DealDetailDrawer v-model:open="open1" :deal="dealNew" />
                </v-main>
            </v-app>
        </Variant>

        <Variant title="won status">
            <v-app>
                <v-main class="story-main">
                    <DealDetailDrawer v-model:open="open2" :deal="dealWon" />
                </v-main>
            </v-app>
        </Variant>
    </Story>
</template>

<style scoped>
.story-main {
    background: #f6f3ec;
    min-height: 100vh;
}
</style>
