<!-- Плитка-ссылка «смотреть все» в конце ленты: точечная текстура, стрелка и подпись. mini — круглая, под свайпер аватаров -->
<template>
  <NuxtLink
    :class="{'--mini': mini}"
    :to="generateLink(to)"
    class="ui-view-all"
  >
    <span
      v-if="!mini"
      class="ui-view-all__icon"
    >
      <UiIcon
        name="arrow-right"
        size="20"
      />
    </span>

    <span class="ui-view-all__content">
      <span class="ui-view-all__text">{{ text }}</span>
      <span
        v-if="note"
        class="ui-view-all__note"
      >{{ note }}</span>
    </span>
  </NuxtLink>
</template>

<script setup lang="ts">
defineProps<{
  to: string
  text: string
  /** Вторая строка: «16 models» */
  note?: string
  /** Круглый вариант в размер аватар-карточки — для свайпера */
  mini?: boolean
}>();

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

<style lang="scss">
.ui-view-all {
  display: grid;
  place-content: center;
  justify-items: center;
  row-gap: 12px;
  padding: 12px;
  text-align: center;
  border: 1px solid $view-all-border;
  border-radius: $radius-xl;

  /* точки поверх градиента — двумя слоями, без отдельной ноды-оверлея */
  background-image:
    radial-gradient(circle, $view-all-dots 1px, transparent 1px),
    linear-gradient(to bottom right in oklab, $view-all-gradient-from, $view-all-gradient-via, $view-all-gradient-to);
  background-size: 14px 14px, cover;

  @include hover(border-color) {
    border-color: $view-all-border--hover;
  }
}

.ui-view-all__icon {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  color: $view-all-icon;
  background-color: $view-all-icon-bg;
  border: 1px solid $view-all-icon-border;
  border-radius: $radius-full;
}

.ui-view-all__content {
  display: grid;
  row-gap: 2px;
}

.ui-view-all__text {
  @include font-sm;

  font-weight: 600;
  color: $view-all-text;
}

.ui-view-all__note {
  @include font-xs;

  color: $view-all-note;
}

.ui-view-all.--mini {
  width: var(--card-round-size);
  height: var(--card-round-size);
  padding: 8px;
  row-gap: 0;
  border-width: 2px;
  border-color: $card-round-border;
  border-radius: $radius-full;
  background-size: 12px 12px, cover;

  @include hover(border-color) {
    border-color: $card-round-border--hover;
  }
}

.ui-view-all.--mini .ui-view-all__text,
.ui-view-all.--mini .ui-view-all__note {
  @include font-xs;

  line-height: 1.2;
}
</style>
