import { createFileRoute } from "@tanstack/react-router";
import { playerQueries } from "@/features/players/queries";
import PlayerStatsTable from "@/features/players/components/player-stats-table";
import { Suspense } from "react";
import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";

export const Route = createFileRoute("/_authed/stats")({
  component: Stats,
  beforeLoad: ({ context }) => {
    const queryClient = context.queryClient;
    prefetchServerQuery(queryClient, playerQueries.allStats());
  },
  loader: () => ({
    withPadding: false,
    fullWidth: true,
    header: {
      title: "Player Stats"
    },
        refresh: [playerQueries.allStats().queryKey],
  }),
});

function Stats() {
  return <Suspense fallback={<PlayerStatsTableSkeleton />}>
    <PlayerStatsTable />
  </Suspense>;
}