<template>
    <div>
        <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
                {{ $t('navigation.home') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item class="text-sm opacity-50">
                {{ $t('contact-info') }}
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="content">
            <markdown-renderer :content="content || ''" />
        </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>
.breadcrumb {
    padding: 1rem 1rem;
}

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

:deep(.markdown-body p) {
    margin-bottom: 1rem;
}

:deep(.markdown-body h2) {
    text-align: center;
}
</style>