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

export const PlayerListItemSkeleton = () => {
  return (
    <Box p="md">
      <Group gap="sm" align="center" w="100%" wrap="nowrap" style={{ overflow: 'hidden' }}>
        <Skeleton height={40} width={40} circle style={{ flexShrink: 0 }} />
        <Stack gap={2} style={{ flexGrow: 1, overflow: 'hidden', minWidth: 0 }}>
          <Group gap='xs'>
            <Skeleton height={16} width={120} />
            <Skeleton height={12} width={30} />
            <Skeleton height={12} width={30} />
          </Group>

          <ScrollArea type="never">
            <Group gap='xs' wrap="nowrap">
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={25} />
                <Skeleton height={10} width={30} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={10} />
                <Skeleton height={10} width={15} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={10} />
                <Skeleton height={10} width={15} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={20} />
                <Skeleton height={10} width={25} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={25} />
                <Skeleton height={10} width={20} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={25} />
                <Skeleton height={10} width={20} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={30} />
                <Skeleton height={10} width={25} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={30} />
                <Skeleton height={10} width={25} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={15} />
                <Skeleton height={10} width={25} />
              </Stack>
              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={15} />
                <Skeleton height={10} width={25} />
              </Stack>
            </Group>
          </ScrollArea>
        </Stack>
      </Group>
    </Box>
  );
};

interface PlayerStatsTableSkeletonProps {
  hideFilters?: boolean;
}

const PlayerStatsTableSkeleton = ({ hideFilters = false }: PlayerStatsTableSkeletonProps) => {
  return (
    <Container size="100%" px={0}>
      <Stack gap="xs">
        <Skeleton mx="md" height={12} width={100} />
        <Box px="md" pb={4}>
          <Skeleton height={40} />
        </Box>

        <Group justify="space-between" align="center" w='100%'>
          <Group ml="auto" gap="xs">
            <Skeleton height={12} width={200} />
          </Group>
        </Group>

        <Stack>
          {Array(10).fill(null).map((_, index) => (
            <Box key={index}>
              <PlayerListItemSkeleton />
              {index < 9 && <Divider />}
            </Box>
          ))}
        </Stack>
      </Stack>
    </Container>
  );
};

export default PlayerStatsTableSkeleton;