import BadgeStatsTable from '@/features/badges/components/badge-stats-table';
import BadgeStatsTableSkeleton from '@/features/badges/components/badge-stats-table-skeleton';
import { badgeQueries, useAllBadges } from '@/features/badges/queries';
import PlayerStatsTableSkeleton from '@/features/players/components/player-stats-table-skeleton';
import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch';
import { createFileRoute } from '@tanstack/react-router';
import { Suspense } from 'react';

export const Route = createFileRoute('/_authed/badges')({
  component: Badges,
  beforeLoad: ({ context }) => {
    const queryClient = context.queryClient;
    prefetchServerQuery(queryClient, badgeQueries.allBadges());
  },
  loader: () => ({
    withPadding: false,
    fullWidth: true,
    header: {
      title: 'All Badges',
      withBackButton: true,
    },
    refresh: [badgeQueries.allBadges().queryKey],
  }),
});

function Badges() {
  return (
    <Suspense fallback={<BadgeStatsTableSkeleton />}>
      <div>
        <BadgeStatsTable />
      </div>
    </Suspense>
  );
}