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

const UpcomingTournamentSkeleton = () => {
  return (
    <Stack gap="lg">
      <Flex px="md" justify="center" w="100%">
        <Skeleton height={318} width={318} radius="lg" />
      </Flex>
        <Stack align="center" gap={2}>
          <Skeleton height={16} w="30%" mb="md" />
          <Skeleton height={16}  w="30%" />
        </Stack>

      <Stack px="md">
        <Card
          withBorder
          p="lg"
          style={{
            borderRadius:
              "2px 2px var(--mantine-radius-lg) var(--mantine-radius-lg)",
          }}
        >
          <Skeleton height={14} width="80%" mb={16} />
          <Group mb="sm" gap="xs" align="center">
            <Skeleton height={32} width={16} />
            <Skeleton height={32} width="20%" />
            <Box ml="auto">
              <Skeleton height={32} width={80} radius="sm" />
            </Box>
          </Group>
          <Group mb="sm" gap="xs" align="center">
            <Skeleton height={32} width={16} />
            <Skeleton height={32} width="20%" />
            <Box ml="auto">
              <Skeleton height={32} width={80} radius="sm" />
            </Box>
          </Group>
        </Card>
      </Stack>
    </Stack>
  );
};

export default UpcomingTournamentSkeleton;