import { useAuth } from "@/contexts/auth-context";
import { useTournaments } from "../queries";
import { useSheet } from "@/hooks/use-sheet";
import { Button, Stack } from "@mantine/core";
import { PlusIcon } from "@phosphor-icons/react";
import Sheet from "@/components/sheet/sheet";
import TournamentForm from "./tournament-form";
import { TournamentCard } from "./tournament-card";

const TournamentCardList = () => {
  const { data: tournaments } = useTournaments();
  const { roles } = useAuth();
  const sheet = useSheet();
  return (
    <Stack>
      {roles?.includes("Admin") ? (
        <>
          <Button
            leftSection={<PlusIcon />}
            variant="subtle"
            onClick={sheet.open}
          >
            Create Tournament
          </Button>
          <Sheet {...sheet.props} title="Create Tournament">
            <TournamentForm close={sheet.close} />
          </Sheet>
        </>
      ) : null}
      {tournaments?.map((tournament: any) => (
        <TournamentCard key={tournament.id} tournament={tournament} />
      ))}
    </Stack>
  );
};

export default TournamentCardList;
