<!-- SEO-текст со ссылками; виден только на 1-й странице без фильтров -->
<template>
  <div
    v-if="isShow && text"
    class="section-seo-text"
  >
    <p class="section-seo-text__wrapper">
      <!-- Разбиваем текст на части и рендерим NuxtLink где нужно -->
      <template
        v-for="(part, index) in parsedText"
        :key="index"
      >
        <NuxtLink
          v-if="part.isLink"
          :to="part.href"
        >
          {{ part.text }}
        </NuxtLink>
        <span v-else>
          {{ part.text }}
        </span>
      </template>
    </p>
  </div>
</template>

<script setup lang="ts">
import { splitTextByKeywordLinks } from '../../utils/section-seo-text/split-text-by-keyword-links';

const props = defineProps<{
  text?: string
  linksLink?: string
}>();

const { generateLink } = useGenerateLink();
const route = useRoute();
const { tm, rt } = useI18n();

const isShow = computed(() => Object.keys(route.query).length === 0);

const footerLinks = computed(() => {
  const raw = props.linksLink ? tm(props.linksLink) : {};
  const result: Record<string, string> = {};
  for (const [key, value] of Object.entries(raw)) {
    result[ key ] = rt(value);
  }
  return result;
});

const parsedText = computed(() =>
  splitTextByKeywordLinks(props.text ?? '', footerLinks.value, generateLink),
);
</script>

<style lang="scss">
.section-seo-text {
  @include font-sm;

  color: $seo-footer-text;
  padding-top: 32px;
  margin-top: auto;
}

.section-seo-text__wrapper {
  padding: 24px;
  border-radius: $radius-xl;
  background-color: $seo-footer-bg;
}

.section-seo-text a {
  color: $seo-footer-link;

  @include hover(color) {
    color: $seo-footer-link--hover;
  }
}
</style>
