<template>
  <div class="w-full h-full flex p-3">
    <img src="/chad-bg.webp" alt="Background" draggable="false" class="pointer-events-none absolute opacity-3 -z-1 block inset-0 object-contain w-full h-full">

    <div v-auto-animate class="w-1/2 m-auto">
      <div class="text-center">
        <PrimeSelectButton v-model="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" />
      </div>

      <slot />
    </div>
  </div>

  <PrimeBadge class="fixed top-3 right-3 opacity-50" severity="secondary" :value="version" size="small" />
</template>

<script setup lang="ts">
const route = useRoute()
const { version } = useApp()

const options = computed(() => {
  return [
    {
      label: 'Login',
      routeName: 'Login',
    },
    {
      label: 'Register',
      routeName: 'Register',
    },
  ]
})

const tab = shallowRef(options.value.find(option => route.name === option.routeName))

watch(tab, (tab) => {
  if (!tab)
    return

  navigateTo({ name: tab.routeName })
})
</script>
