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

const MatchCardSkeleton = ({ minWidth }: { minWidth: string }) => (
  <Card
    withBorder
    radius="md"
    p="md"
    style={{ minWidth, flex: "0 0 auto" }}
  >
    <Stack gap="md">
      <Group justify="space-between">
        <Skeleton height={14} width="30%" />
        <Skeleton height={20} width={40} radius="xl" />
      </Group>
      <Stack gap="sm">
        <Group>
          <Skeleton height={40} width={40} radius="sm" />
          <Skeleton height={16} width="40%" />
          <Box ml="auto">
            <Skeleton height={24} width={30} />
          </Box>
        </Group>
        <Group>
          <Skeleton height={40} width={40} radius="sm" />
          <Skeleton height={16} width="40%" />
          <Box ml="auto">
            <Skeleton height={24} width={30} />
          </Box>
        </Group>
      </Stack>
    </Stack>
  </Card>
);

const StartedTournamentSkeleton = () => {
  return (
    <Stack gap="lg">
      {/* Compact header skeleton */}
      <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>

      {/* Live carousel skeleton */}
      <Box>
        <Skeleton height={12} width={90} ml="md" mb={10} />
        <Group gap="xs" pl="md" wrap="nowrap" style={{ overflow: "hidden" }}>
          <MatchCardSkeleton minWidth="88%" />
          <MatchCardSkeleton minWidth="88%" />
        </Group>
      </Box>

      {/* Recently finished skeleton */}
      <Box>
        <Skeleton height={12} width={120} ml="md" mb={10} />
        <Stack gap="sm" px="md">
          <MatchCardSkeleton minWidth="100%" />
          <MatchCardSkeleton minWidth="100%" />
        </Stack>
      </Box>

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

export default StartedTournamentSkeleton;
