<template>
  <div class="w-full flex flex-col items-center">
    <div @click="uiStore.closeBox()" class="cursor-pointer">
      <logo />
    </div>
    <main>
      <boxes />
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUiStore } from '~/store/ui'
import { useDataStore } from '~/store/data'

const uiStore = useUiStore()
const dataStore = useDataStore()
const route = useRoute()

onMounted(async () => {
  await dataStore.loadData()
  const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
  if (typeof idParam === 'string' && idParam.length > 0) {
    uiStore.selectBox(idParam)
  }
})
</script>
