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

import { useItem } from '../stores/item';

const route = useRoute()
const router = useRouter()

const page = useItem()

console.log(router)
</script>
<template>
    <div class="nav">
        <div class="nav-group">
            <span class="nav-icon" :class="[{ 'active': route.name == 'home' || route.fullPath == '/' }]">
                <RouterLink :to="`/${page.slug}`">
                    <i-mdi-home-outline />
                </RouterLink>
            </span>
            <span class="nav-icon" :class="[{ 'active': route.name == 'scene' }]" style="font-size: 1.875rem;">
                <RouterLink :to="`/${page.slug}/${page.scene_3d}`">
                    <i-mdi:video-3d />
                </RouterLink>
            </span>
            <span class="nav-icon" style="font-size: 1.375rem;" v-if="false">
                <i-mdi:vector-arrange-below />
            </span>
        </div>
        <div class="nav-group">
            <span class="nav-icon" :class="[{ disabled: router.options.history.state.back == null }]">
                <RouterLink :to="(router.options.history.state.back as string) ?? '/'">
                    <i-mdi:arrow-left />
                </RouterLink>
            </span>
            <span class="nav-icon" :class="[{ disabled: router.options.history.state.forward == null }]">
                <RouterLink :to="(router.options.history.state.forward as string) ?? '/'">
                    <i-mdi:arrow-right />
                </RouterLink>
            </span>
        </div>
        <div class="nav-content">
            Нажмите на <span class="nav-icon">
                <i-icon-park-solid-left-c />
            </span> вверху экрана, чтобы узнать подробнее про объекты на глэмпинге
        </div>
    </div>
</template>