<script setup lang="ts">
import ProjectCard from './ProjectCard.vue';

const base = {
    id: 1,
    name: 'Окна СПб',
    signal_type: 'site' as const,
    signal_identifier: 'okna.ru',
    daily_limit_target: 50,
    delivered_today: 32,
    is_active: true,
    sync_status: 'ok' as const,
};

const okProject = base;
const pendingProject = { ...base, sync_status: 'pending' as const };
const failedProject = { ...base, sync_status: 'failed' as const };
const pausedProject = { ...base, is_active: false };
</script>

<template>
    <Story title="Projects / ProjectCard" :layout="{ type: 'single', iframe: true }">
        <Variant title="Sync OK (active)">
            <v-app>
                <v-main class="story-pane">
                    <div class="card-wrap">
                        <ProjectCard :project="okProject" :selected="false" />
                    </div>
                </v-main>
            </v-app>
        </Variant>
        <Variant title="Sync pending">
            <v-app>
                <v-main class="story-pane">
                    <div class="card-wrap">
                        <ProjectCard :project="pendingProject" :selected="false" />
                    </div>
                </v-main>
            </v-app>
        </Variant>
        <Variant title="Sync failed">
            <v-app>
                <v-main class="story-pane">
                    <div class="card-wrap">
                        <ProjectCard :project="failedProject" :selected="false" />
                    </div>
                </v-main>
            </v-app>
        </Variant>
        <Variant title="Paused">
            <v-app>
                <v-main class="story-pane">
                    <div class="card-wrap">
                        <ProjectCard :project="pausedProject" :selected="false" />
                    </div>
                </v-main>
            </v-app>
        </Variant>
    </Story>
</template>

<style scoped>
.story-pane {
    background: #f6f3ec;
    min-height: 100vh;
    padding: 24px;
}
.card-wrap {
    width: 360px;
}
</style>
