<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useQuery } from '@tanstack/vue-query'
import { fetchRepo } from '@/api/repos'
import Breadcrumb from '@/components/layout/Breadcrumb.vue'
import RepoDetail from '@/components/repo/RepoDetail.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'

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

const { data, isLoading } = useQuery({
  queryKey: ['repo', org, owner, repo],
  queryFn: () => fetchRepo(org.value, owner.value, repo.value),
})

const breadcrumbs = computed(() => [
  { label: 'Dashboard', to: `/app/${org.value}/` },
  { label: `${owner.value}/${repo.value}` },
])
</script>

<template>
  <Breadcrumb :items="breadcrumbs" />
  <LoadingSpinner v-if="isLoading" />
  <RepoDetail v-else-if="data" :repo="data" />
</template>
