<template>
  <div>
    <h2 class="view-videos__title --categories _title">{{ t('main_categories') }}</h2>
    <CategoryByLetter
      v-if="data"
      :categories="data"
    />
    <SectionSeoText
      v-if="footerText && data"
      :text="footerText"
      :links-link="footerLinksLink"
    />
  </div>
</template>

<script setup lang="ts">
import { CategoriesApiService } from '../../services/api/categories.service';
import { AsyncData } from '../../runtime';

defineProps<{
  footerText?: string
  footerLinksLink?: string
}>();

const { t } = useI18n();

const { data } = await useFetchCategoriesGroupByLetter(
  AsyncData.GroupsCategoriesByLetter,
  CategoriesApiService.getListGroupedByLetter,
);
</script>
