<template>
  <div class="border-t border-border pt-[75px]">
    <UiContainer class="flex flex-col gap-24">
      <div
        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between">
        <div v-for="(item, index) in component.front_section_lang[0].data" :key="index"
          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
          <h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
          <div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
            v-for="(el, indexEl) in item.children" :key="indexEl">
            {{ el.title }}
          </div>
        </div>
      </div>

      <ClientOnly v-if="!colorMode?.forced">
        <img class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
          :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'" alt="logo" @click="menuStore.navigateToItem()" />
      </ClientOnly>
    </UiContainer>
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  component: {
    id: number
    name: string
    img: string[]
    component_name: string
    is_no_lang: boolean
    page_name: string
    front_section_lang: {
      data: {
        title: string
        children: {
          title: string
          value: 'email' | 'address' | 'certificate' | 'document' | 'form' | 'info'
          link?: string
        }[]
      }[]
      id_front_section: number
      id_lang: number
    }[]
  }
}>();

const menuStore = useMenuStore();
const colorMode = useColorMode();

const isDark = computed({
  get() {
    return colorMode.value === "dark";
  },
  set(_isDark) {
    colorMode.preference = _isDark ? "dark" : "light";
  },
});
</script>
