<script setup lang="ts">
import { getAuthClient } from '@/api/auth_client'
import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
import HeaderMenu from '@/components/HeaderMenu.vue'
import { useMessage } from 'naive-ui'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { NTag } from 'naive-ui'

const message = useMessage()
const client = getAuthClient()
const route = useRoute()

const scenarioId = route.params.id

const scenario = ref<Scenario>({
    id: undefined,
    name: undefined,
    story: undefined,
    author: undefined,
    status: undefined,
    updatedAt: undefined,
    createdAt: undefined,
    publishedAt: undefined,
})

async function getScenario(id: number) {
    const res = await client.GetScenario({ id: id })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    scenario.value = res.scenario!
}
getScenario(Number(scenarioId))
</script>

<template>
    <div class="center-block-custom">
        <div class="width700">
            <div class="scenario-title">
                {{ scenario.name }}
            </div>
            <img class="scenario-image" :src="scenario.image">
            <div class="scenario-description">
                {{ scenario.description }}
            </div>
            <div class="scenario-author">
                <n-tag :bordered="false" type="success" class="status-block">Автор: {{ scenario.author?.username
                }}</n-tag>
            </div>
        </div>
    </div>

    <HeaderMenu active="catalog" />
</template>

<style scoped>
.scenario-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.scenario-image {
    width: 100%;
    max-width: 400px;
    margin-bottom: 10px;
}

.scenario-description {
    color: #aaa;
    margin-bottom: 10px;
}
</style>
