import { Suspense } from "react";
import { SimpleGrid, Skeleton } from "@mantine/core";
import QuietBoundary from "./quiet-boundary";
import SectionBox from "./section-box";
import TournamentSection from "./tournament-section";
import ToolsList from "./tools-list";

const TournamentSkeleton = () => (
  <SectionBox>
    <Skeleton height={24} width={180} radius="sm" />
    <SimpleGrid cols={3} spacing="sm" mt="sm">
      <Skeleton height={72} radius="md" />
      <Skeleton height={72} radius="md" />
      <Skeleton height={72} radius="md" />
    </SimpleGrid>
  </SectionBox>
);

export const AdminDashboard = () => (
  <>
    <QuietBoundary>
      <Suspense fallback={<TournamentSkeleton />}>
        <TournamentSection />
      </Suspense>
    </QuietBoundary>
    <ToolsList />
  </>
);

export default AdminDashboard;