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

const StartedTournamentSkeleton = () => {
  return (
    <Stack gap="lg">
      {/* Header skeleton */}
      <Stack px="md">
        <Group justify="space-between" align="flex-start">
          <Box style={{ flex: 1 }}>
            <Skeleton height={32} width="60%" mb="xs" />
            <Skeleton height={16} width="40%" />
          </Box>
          <Skeleton height={60} width={60} radius="md" />
        </Group>
      </Stack>

      {/* Match carousel skeleton */}
      <Box>
        <Group gap="xs" px="xl">
          {Array.from({ length: 2 }).map((_, index) => (
            <Card
              key={index}
              withBorder
              radius="lg"
              p="lg"
              style={{ minWidth: "95%", flex: "0 0 auto" }}
            >
              <Stack gap="md">
                {/* Match header */}
                <Group justify="space-between">
                  <Skeleton height={14} width="30%" />
                  <Skeleton height={20} width={60} radius="xl" />
                </Group>

                {/* Teams */}
                <Stack gap="sm">
                  <Group>
                    <Skeleton height={32} width={32} radius="sm" />
                    <Skeleton height={16} width="40%" />
                    <Box ml="auto">
                      <Skeleton height={24} width={30} />
                    </Box>
                  </Group>
                  <Center>
                    <Skeleton height={14} width={20} />
                  </Center>
                  <Group>
                    <Skeleton height={32} width={32} radius="sm" />
                    <Skeleton height={16} width="40%" />
                    <Box ml="auto">
                      <Skeleton height={24} width={30} />
                    </Box>
                  </Group>
                </Stack>
              </Stack>
            </Card>
          ))}
        </Group>
      </Box>

      {/* Actions section skeleton */}
      <Box>
        <Divider />
        <Stack gap={0}>
          <Skeleton height={48} width="100%" />
          <Skeleton height={48} width="100%" />
          <Skeleton height={48} width="100%" />
          <Skeleton height={48} width="100%" />
        </Stack>
      </Box>
    </Stack>
  );
};

export default StartedTournamentSkeleton;