<!-- Переключатель разделов: пилюля с опциями, активная подсвечена.

Базовый компонент: получает массив опций и текущее значение, а решение «что
показывать» остаётся снаружи. У опции, кроме подписи, могут быть иконка и
второстепенная подпись — так в переключателе видно не только название раздела,
но и сколько в нём сейчас всего (например «Webcam · 30 online»).

Опция с адресом (`to`) — это переход, а не выбор: такие опции рисуются ссылкой,
чтобы переключение разделов работало как навигация (и индексировалось). -->
<template>
  <div class="ui-switcher">
    <component
      v-for="item in items"
      :is="item.to ? NuxtLink : 'button'"
      :key="item.name"
      :class="{'--active': item.name === modelValue}"
      :to="item.to"
      :type="item.to ? undefined : 'button'"
      class="ui-switcher__item"
      @click="item.to || emit('update:modelValue', item.name)"
    >
      <span class="ui-switcher__title">{{ item.title }}</span>

      <span
        v-if="item.icon || item.subtitle"
        class="ui-switcher__meta"
      >
        <UiIcon
          v-if="item.icon"
          :name="item.icon"
          class="ui-switcher__icon"
          size="16"
        />
        <span
          v-if="item.subtitle"
          class="ui-switcher__subtitle"
        >{{ item.subtitle }}</span>
      </span>
    </component>
  </div>
</template>

<script setup lang="ts">
import { NuxtLink } from '#components';
import type { ISwitcherItem } from '../../types';

defineProps<{
  items: ISwitcherItem[]
  modelValue: string
}>();

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>();
</script>

<style lang="scss">
.ui-switcher {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background-color: $switcher-bg;
  border: 1px solid $switcher-border;
  border-radius: $radius-full;
}

.ui-switcher__item {
  @include font-sm;

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-weight: 600;
  color: $switcher-text;
  border-radius: $radius-full;
  transition: var(--transition) color, var(--transition) background-color;

  &:is(:hover, :focus-visible) {
    color: $switcher-text--hover;
  }

  &.--active {
    color: $switcher-text--active;
    background-color: $switcher-bg--active;
  }

  @include from-br(xm) {
    padding-inline: 20px;
  }
}

.ui-switcher__meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ui-switcher__icon {
  color: $switcher-icon;
}

.ui-switcher__item.--active .ui-switcher__icon {
  color: $switcher-icon--active;
}

.ui-switcher__subtitle {
  color: $switcher-subtitle;
}

.ui-switcher__item.--active .ui-switcher__subtitle {
  color: $switcher-subtitle--active;
}
</style>
