<template>
  <nav class="bottom-nav" aria-label="Навигация">
    <RouterLink
      v-for="item in navItems"
      :key="item.path"
      :to="item.path"
      class="bottom-nav__item"
      :class="{ 'bottom-nav__item--active': isActive(item.path) }"
      :aria-label="item.label"
      :aria-current="isActive(item.path) ? 'page' : undefined"
    >
      <span class="bottom-nav__icon">
        <BottomNavIcon :name="item.icon" />
      </span>
      <span class="bottom-nav__label">{{ item.label }}</span>
    </RouterLink>
  </nav>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

const navItems = [
  { path: '/feed', label: 'Лента', icon: 'grid' },
  { path: '/matches', label: 'Совпадения', icon: 'heart' },
  { path: '/chats', label: 'Чаты', icon: 'chat' },
  { path: '/dates', label: 'Встречи', icon: 'calendar' },
  { path: '/profile/me', label: 'Профиль', icon: 'person' },
]

function isActive(path: string) {
  return route.path.startsWith(path)
}
</script>

<script lang="ts">
const BottomNavIcon = {
  props: { name: String },
  template: `
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <path v-if="name==='grid'"     d="M3 3h7v7H3zm11 0h7v7h-7zM3 14h7v7H3zm11 0h7v7h-7z"/>
      <path v-if="name==='heart'"    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
      <path v-if="name==='chat'"     d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      <path v-if="name==='calendar'" d="M8 2v4M16 2v4M3 10h18M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      <path v-if="name==='person'"   d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
    </svg>
  `,
}
</script>

<style scoped lang="scss">
.bottom-nav {
  display: flex;
  height: var(--nav-height);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;

  &__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
    padding: 8px 4px;

    &:hover {
      color: var(--color-cream);
    }

    &--active {
      color: var(--color-cream);

      .bottom-nav__icon {
        color: var(--color-signal);
      }
    }
  }

  &__icon {
    width: 22px;
    height: 22px;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  &__label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}
</style>
