<!-- Подписки на категории: широкие показывают лучшее за неделю, узкие — новинки. Данные пока заглушка -->
<template>
  <div class="_page _container">
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs"
    />

    <LibraryFollows
      :items="items"
      :title="t('library.my_categories')"
      icon="grid"
      without-avatar
    />
  </div>
</template>

<script setup lang="ts">
import { getLibraryCategoriesStub } from '../../stubs/library-follows';
import { convertString, formatDate } from '../../runtime';
import type { IBreadcrumbItem, ILibraryFeedItem } from '../../types';

const { t } = useI18n();
const { generateLink } = useGenerateLink();

const items = computed<ILibraryFeedItem[]>(() => getLibraryCategoriesStub().map(category => ({
  guid: category.guid,
  title: category.title,
  to: generateLink(`/categories/${convertString().toSlug(category.title)}`),
  newCount: category.newCount,
  meta: [
    { icon: 'video-camera', text: String(category.videosCount) },
    { icon: 'date', text: t('library.updated_at', { date: formatDate(category.lastVideoAddedAt) }), desktopOnly: true },
  ],
  videosCount: category.videosCount,
  // Нечего показать в новинках — лента откатывается на лучшее за неделю
  feedTitle: category.newCount ? t('library.latest') : t('library.top_this_week'),
  openText: t('library.open_category'),
  videos: category.videos,
})));

useNoindex();

const { brandName } = useAppConfig();

useHead(() => ({
  title: `${t('library.my_categories')} — ${brandName}`,
}));

const breadcrumbs = [
  {
    name: `${t('navigation.main')}`,
    to: '/',
  },
  {
    name: `${t('navigation.library')}`,
    to: '/library',
  },
  {
    name: `${t('library.my_categories')}`,
  },
] as IBreadcrumbItem[];
</script>
