<template>
  <div class="category-list">
    <NuxtLink
      v-for="category in items"
      :key="`category-all-${category.guid}`"
      :data-count="category.videosCount"
      :class="{'--top': category.isTop}"
      :to="generateLink(`/categories/${slug(category.name)}`)"
      class="category-list__link"
    >
      {{ category.title }}
      <img
        v-if="category.icon"
        :src="`/icons/flags/${category.icon}.svg`"
        :alt="category.icon"
        class="category-list__link-image"
        width="17"
        height="17"
        loading="lazy"
      >
    </NuxtLink>
    <NuxtLink
      v-if="allCategories"
      :to="generateLink('/categories')"
      class="category-list__link --all"
    >
      {{ t('all_categories') }}
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
import type { ICategoryCard } from '../../types';
import { convertString } from '../../runtime';

defineProps<{
  items: Array<ICategoryCard>
  allCategories?: boolean
}>();

function slug(name: string) {
  return convertString().toSlug(name);
}

const { generateLink } = useGenerateLink();
const { t } = useI18n();
</script>

<style lang="scss">
.category-list {
  overflow: hidden;
  width: 100%;

  @include to-br(sm) {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 6px;
  }

  @include from-br(sm) {
    column-count: 3;
    column-gap: 24px;
  }

  @include from-br(md) {
    column-count: 4;
  }

  @include from-br(lg) {
    column-count: 5;
  }
}

.category-list__link {
  @include font-sm;

  @include hover(color) {
    color: $categories-link-text--hover;
  }

  @include from-br(sm) {
    display: flex;
    column-gap: 8px;
    align-items: baseline;
    color: $categories-link-text;
    margin-bottom: 6px;
    padding-block: 4px;
  }

  @include to-br(sm) {
    display: flex;
    column-gap: 6px;
    align-items: center;
    padding: 8px 12px;
    background-color: $categories-link-mobile-bg;
    border-radius: $radius-lg;
    color: $categories-link-mobile-text;
    border: 1px solid $categories-link-mobile-border;
  }
}

.category-list__link.--top {
  font-weight: 600;
  color: $categories-link-text-top;

  @include to-br(sm) {
    background-color: $categories-link-top-bg;
  }
}

.category-list__hot-icon {
  align-self: start;
  flex-shrink: 0;
}

.category-list__link::after {
  @include from-br(sm) {
    @include font-xs;

    content: attr(data-count);
    color: $categories-link-count;
    flex-shrink: 0;
  }
}

.category-list__link-image {
  width: 17px;
  height: 12px;
  object-fit: cover;
  align-self: start;
  margin-top: 5px;
  flex-shrink: 0;
}

.category-list__link.--all {
  @include font-sm;

  display: block;
  padding: 8px 16px;
  border-radius: $radius-lg;
  background-color: $categories-link-all-bg;
  color: $categories-link-all-text;
  width: max-content;

  @include hover(background-color) {
    background-color: $categories-link-all-bg--hover;
  }
}
</style>
