<template>
    <div class="page-container">
        <div v-if="content">
            <el-breadcrumb class="breadcrumb" separator="/">
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/')">
                        {{ $t('navigation.home') }}
                    </NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/about')">
                        {{ $t('navigation.contact-info') }}
                    </NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>

            <div class="content">
                <markdown-renderer :content="content || ''" />
            </div>
        </div>
        <div v-else class="loading">
            <el-skeleton :rows="5" animated />
        </div>
    </div>
</template>

<script setup lang="ts">
const { findOne } = useStrapi()
const { getStrapiLocale } = useLocalizations()

const strapiLocale = getStrapiLocale()

const content = ref<string>('')

onMounted(async () => {
    try {
        const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
            populate: '*',
            locale: strapiLocale,
        })
        if (response.data) {
            content.value = response.data.content || ''
        } else {
            console.warn('No contact info data found')
        }
    } catch (error) {
        console.error('Failed to fetch contact info:', error)
    }
})
</script>

<style scoped>
.page-container {
    padding: 2rem 1rem;
}

.breadcrumb {
    padding: 1rem 1rem;
}

.content {
    padding: 1rem;
    margin-bottom: 2rem;
}

:deep(.markdown-body h2) {
    text-align: center;
}

:deep(.markdown-body ul) {
    list-style-type: none;
}
</style>