<script setup lang="ts">
/** Нижняя панель-вкладки для телефона. 5 главных разделов; остальное — в «Ещё». */
import { RouterLink, useRoute } from 'vue-router';
import { computed } from 'vue';

interface Tab { title: string; to: string; }
const tabs: Tab[] = [
    { title: 'Поле', to: '/autopodbor' },
    { title: 'Проекты', to: '/projects' },
    { title: 'Сделки', to: '/deals' },
    { title: 'Биллинг', to: '/billing' },
    { title: 'Канбан', to: '/kanban' },
];
const route = useRoute();
const activeTo = computed(() => tabs.find((t) => route.path === t.to)?.to ?? '');
</script>

<template>
    <nav class="ld-bottomnav" aria-label="Основная навигация">
        <RouterLink
            v-for="t in tabs"
            :key="t.to"
            :to="t.to"
            data-testid="bottomnav-item"
            class="ld-bottomnav__item"
            :class="{ 'ld-bottomnav__item--active': activeTo === t.to }"
        >
            <span class="ld-bottomnav__label">{{ t.title }}</span>
        </RouterLink>
    </nav>
</template>

<style scoped>
.ld-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1010;
    display: flex;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
    background: #ffffff;
    border-top: 1px solid rgba(1, 32, 25, 0.1);
}
.ld-bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    text-decoration: none;
    color: rgba(1, 32, 25, 0.55);
    font-size: 11px;
    font-weight: 600;
}
.ld-bottomnav__item--active { color: var(--liderra-teal); }
.ld-bottomnav__label { line-height: 1; }
</style>
