<script setup lang="ts">
import k_logo from '@/assets/LOGO.svg'
const { fetchData } = useApiFetch()

import tg from '@/assets/icons/telegram.svg'
import vk from '@/assets/icons/vk.svg'
import yt from '@/assets/icons/youtube.svg'
const icons = {
  'simple-icons:vk': vk,
  'simple-icons:telegram': tg,
  'simple-icons:youtube': yt
}

const { data: footerData } = await fetchData<Footer[]>(
  `footer`,
  { ordering: 'small_text' },
  true
)
const { data: socialNetworkData } = await fetchData<SocialNetwork[]>(
  `social_network`,
  {},
  true
)
</script>
<template>
  <div>
    <div class="footer" id="contacts">
      <div class="container">
        <div class="col-span-12 lg:col-span-6 xl:col-span-3 mb-12 lg:mb-0">
          <div class="k-logo">
            <k_logo />
          </div>
        </div>
        <div class="col-span-12 lg:col-span-6 xl:col-span-6 mb-12 lg:mb-0">
          <template v-for="item in footerData">
            <div class="footer-text" v-if="!item.small_text">
              <template
                v-for="p in item.text.replace(/\r\n/g, '\n').split('\n')"
              >
                <p v-if="p.trim().length">{{ p }}</p>
              </template>
            </div>
          </template>
        </div>
        <div class="col-span-12 xl:col-span-3">
          <div class="footer-text footer-text-social" v-if="socialNetworkData">
            <template v-for="item in socialNetworkData">
              <a
                :class="['footer-icon', { 'footer-icon-big': !item.icon }]"
                :href="item.link"
                target="_blank"
              >
                <template v-if="item.icon">
                  <component
                    :is="icons[(item.icon.trim() as keyof typeof icons)]"
                    v-if="icons.hasOwnProperty(item.icon.trim())"
                  />
                  <Icon :name="item.icon" v-else />
                </template>
                <span class="footer-icon-text">{{ item.name }}</span>
              </a>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="footer_two">
      <div class="container">
        <div class="col-span-10 col-start-2">
          <template v-for="item in footerData">
            <div class="footer-text" v-if="item.small_text">
              {{ item.text }}
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
