import { Box, Divider, Group, Paper, SimpleGrid, Skeleton, Stack } from "@mantine/core";

const UpcomingTournamentSkeleton = () => {
  return (
    <Stack gap="lg">
      <Group px="md" gap="md" wrap="nowrap" align="center">
        <Skeleton height={64} width={64} radius="md" />
        <Stack gap={8} style={{ flex: 1 }}>
          <Skeleton height={14} width="55%" />
          <Skeleton height={14} width="40%" />
        </Stack>
      </Group>

      <Box>
        <Skeleton height={12} width={90} ml="md" mb={10} />
        <Box px="md">
          <Paper withBorder p="md">
            <Stack gap="sm">
              <Skeleton height={36} radius="sm" />
              <Skeleton height={36} radius="sm" />
            </Stack>
          </Paper>
        </Box>
      </Box>

      <Box px="md">
        <Divider mb="sm" />
        <SimpleGrid cols={3} spacing="sm" verticalSpacing="sm">
          {Array.from({ length: 3 }).map((_, index) => (
            <Skeleton key={index} height={72} radius="md" />
          ))}
        </SimpleGrid>
      </Box>
    </Stack>
  );
};

export default UpcomingTournamentSkeleton;
