<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useQuery } from '@tanstack/vue-query'
import { get } from '@/api/client'
import type { WelcomeData } from '@/api/types'
import WelcomeChecklist from '@/components/welcome/WelcomeChecklist.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'

const route = useRoute()
const org = computed(() => route.params.org as string)

const { data, isLoading } = useQuery({
  queryKey: ['welcome', org],
  queryFn: () => get<WelcomeData>(`/app/${org.value}/api/welcome`),
})
</script>

<template>
  <LoadingSpinner v-if="isLoading" />
  <WelcomeChecklist v-else-if="data" :data="data" :org="org" />
</template>
