<script setup lang="ts">
import k_logo from '@/assets/icons/logo.svg'
import { apiFetch } from '~/utils/apiFetch';

const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=small_text`)
const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
</script>
<template>
    <div class="footer" id="contacts">
        <div class="container">
            <div class="k-logo">
                <k_logo />
            </div>
            <template v-for="item in footerData">
                <div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
            </template>
            <div class="footer-text footer-text-social" v-if="social_networkData">
                <template v-for="item in social_networkData">
                    <a :href="item.link" target="_blank">
                        <Icon :name="item.icon" /> {{ item.name }}
                    </a>
                </template>
            </div>
        </div>
    </div>
</template>