<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 :model-value="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" @update:model-value="onTabChanged" />
      </div>

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

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

<script setup lang="ts">
import type { RouteLocationRaw } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { version } = useApp()

interface Tab {
  label: string
  route: RouteLocationRaw
}

const options = computed(() => {
  return [
    {
      label: 'Login',
      route: { name: 'Login' },
    },
    {
      label: 'Register',
      route: { name: 'Register' },
    },
  ] as Tab[]
})

const tab = computed(() => {
  return options.value.find(option => route.name === router.resolve(option.route)?.name)
})

function onTabChanged(tab: Tab) {
  navigateTo(tab.route)
}
</script>
