import { Box, Container, Flex, Skeleton, Stack } from "@mantine/core";

export function BracketPending() {
  const columns = [4, 2, 1];

  return (
    <Container size="md" px={0}>
      <Box
        p={0}
        style={{
          overflow: "hidden",
          backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
          backgroundSize: "16px 16px",
          backgroundPosition: "0 0, 8px 8px",
          minHeight: "70dvh",
        }}
      >
        <Skeleton height={18} width={140} radius="sm" m={16} />
        <Flex gap="xl" px={16} align="stretch">
          {columns.map((count, columnIndex) => (
            <Stack
              key={`bracket-pending-round-${columnIndex}`}
              gap="xl"
              justify="space-around"
              style={{ opacity: 1 - columnIndex * 0.25 }}
            >
              {Array.from({ length: count }).map((_, matchIndex) => (
                <Skeleton
                  key={`bracket-pending-match-${columnIndex}-${matchIndex}`}
                  height={84}
                  width={220}
                  radius="md"
                />
              ))}
            </Stack>
          ))}
        </Flex>
      </Box>
    </Container>
  );
}