<script setup lang="ts">
const config = useRuntimeConfig()
const apiBase = config.public.apiBase
import '@/assets/main.scss'

import type { NuxtError } from '#app'
import og_img from '/og_img.png'

const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
useSeoMeta({
    title: seoData.value?.title,
    ogTitle: seoData.value?.title,
    description: seoData.value?.content,
    ogDescription: seoData.value?.content,
    ogImage: config.public.baseUrl + og_img,
    // twitterCard: 'summary_large_image',
})

const props = defineProps({
    error: Object as () => NuxtError
})

const handleError = () => clearError({ redirect: '/' })

</script>

<template>
    <div>
        <Header />
        <div class="siteblock bg-white">
            <div class="container prose">
                <div class="col-span-full">
                    <h1>Похоже, произошла ошибка</h1>
                    <p>{{ props.error }}</p>
                    <button @click="navigateTo('/')" class="not-prose">На главную</button>
                </div>
            </div>
        </div>
        <div class="siteblock siteblock_calc bg-white">
            <Suspense>
                <CalcModels />
            </Suspense>
        </div>
        <Footer />
        <Modal />
    </div>
</template>
