<template>
  <Teleport to="body">
    <div class="fixed inset-0 z-50 md:hidden" role="dialog" aria-modal="true">
      <div class="absolute inset-0 bg-black/60" @click="emit('close')" />
      <div
        class="absolute inset-x-0 bottom-0 rounded-t-2xl border-t border-zinc-800 bg-zinc-900 p-4 shadow-pop"
        style="padding-bottom: calc(1rem + env(safe-area-inset-bottom))"
      >
        <div class="mx-auto mb-3 h-1 w-10 rounded-full bg-zinc-700" />
        <nav class="mb-3 flex flex-col gap-1">
          <NavItem
            v-for="item in secondary"
            :key="item.key"
            :to="item.to"
            :href="item.href"
            :icon="item.icon"
            :label="item.label"
            :active="isActive(item.match)"
            orientation="row"
            @click="emit('close')"
          />
        </nav>
        <div class="border-t border-zinc-800/80 pt-3">
          <AppShellFooter />
        </div>
        <BaseButton class="mt-3 w-full" @click="emit('close')">{{ t('common.close') }}</BaseButton>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useNav } from '../../composables/useNav';
import NavItem from './NavItem.vue';
import AppShellFooter from './AppShellFooter.vue';
import BaseButton from '../ui/BaseButton.vue';

const { t } = useI18n();
const { secondary, isActive } = useNav();
const emit = defineEmits<{ close: [] }>();
</script>
