import { createFileRoute } from '@tanstack/react-router'
import { tournamentQueries } from '@/features/tournaments/queries'
import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch'
import { Suspense } from 'react'
import TournamentCardList from '@/features/tournaments/components/tournament-card-list'
import { Skeleton, Stack } from '@mantine/core'

export const Route = createFileRoute('/_authed/tournaments/')({
  beforeLoad: async ({ context }) => {
    const { queryClient } = context;
    prefetchServerQuery(queryClient, tournamentQueries.list())
  },
  loader: () => ({
    header: {
      withBackButton: true,
      title: 'Tournaments',
    },
    refresh: tournamentQueries.list().queryKey
  }),
  component: RouteComponent,
})

function RouteComponent() {
  return <Suspense fallback={<Stack gap="md">
    {Array(10).fill(null).map((_, index) => (
      <Skeleton height="120px" w="100%" />
    ))}
  </Stack>}>
    <TournamentCardList />
  </Suspense>
}