<template>
  <nav class="bottom-nav">
    <NuxtLink to="/" class="bottom-nav__item" :class="{ 'bottom-nav__item--active': $route.path === '/' }">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span>Главная</span>
    </NuxtLink>

    <NuxtLink to="/search" class="bottom-nav__item" :class="{ 'bottom-nav__item--active': $route.path.startsWith('/search') }">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
        <path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>Поиск</span>
    </NuxtLink>

    <NuxtLink to="/favorites" class="bottom-nav__item" :class="{ 'bottom-nav__item--active': $route.path === '/favorites' }">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="currentColor" stroke-width="2" fill="none"/>
      </svg>
      <span>Избранное</span>
    </NuxtLink>

    <NuxtLink to="/profile" class="bottom-nav__item" :class="{ 'bottom-nav__item--active': $route.path === '/profile' }">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
        <path d="M4 21v-1a6 6 0 0112 0v1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>Профиль</span>
    </NuxtLink>
  </nav>
</template>

<style scoped>
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: var(--color-white);
  border-top: 1px solid var(--color-stroke);
  z-index: 100;
  padding: 0 8px;
}

@media (max-width: 744px) {
  .bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  color: var(--color-text-gray);
  font-size: 10px;
  font-family: var(--font-body);
  transition: color var(--transition-fast);
}

.bottom-nav__item--active {
  color: var(--color-primary);
}

.bottom-nav__item svg {
  width: 24px;
  height: 24px;
}
</style>
