<script setup lang="ts">
import icon_3d from '../assets/btn/3D_sm.svg';
import icon_home from '../assets/btn/home.svg';
import icon_gallery from '../assets/btn/gallery.svg';
import { useRoute } from 'vue-router';
import { useItem } from '../stores/item';

const route = useRoute()
const pageStore = useItem()
</script>
<template>
    <div class="nav">
        <div class="nav-group">
            <span class="nav-icon" :class="[{ 'active': ['main', 'home_no'].includes(route.name as string) }]">
                <RouterLink :to="`/${pageStore.page.slug}`">
                    <icon_home />
                </RouterLink>
            </span>
            <span class="nav-icon" :class="[{ 'active': route.name == 'scene' }]" style="font-size: 1.875rem;">
                <RouterLink :to="`/${pageStore.page.slug}/${pageStore.page.scene_3d}`">
                    <icon_3d />
                </RouterLink>
            </span>
            <span class="nav-icon" :class="[{ 'active': route.name == 'gallery' }]" style="font-size: 1.375rem;">
                <RouterLink :to="`/${pageStore.page.slug}/gallery`">
                    <icon_gallery />
                </RouterLink>
            </span>
        </div>
        <div class="nav-content">
            <template v-if="['main', 'home_no'].includes(route.name as string)">
                Нажмите на <span class="nav-icon">
                    <icon_3d />
                </span>, чтобы узнать подробнее про объекты на глэмпинге
            </template>
            <template v-if="['scene'].includes(route.name as string)">
                Нажмите на <span class="nav-icon">
                    <i-icon-park-solid-left-c />
                </span> вверху экрана, чтобы узнать подробнее про объекты на глэмпинге
            </template>
            <template v-if="['gallery'].includes(route.name as string)">
                Картинки можно перетаскивать
            </template>
        </div>
    </div>
</template>