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

const PlayerListItemSkeleton = () => {
  return (
    <Box p="md">
      <Group justify="space-between" align="center" w="100%">
        <Group gap="sm" align="center">
          <Skeleton height={45} circle />
          <Stack gap={2}>
            <Group gap='xs'>
              <Skeleton height={16} width={120} />
              <Skeleton height={12} width={60} />
              <Skeleton height={12} width={80} />
            </Group>
            <Group gap="md" ta="center">
              <Stack gap={0}>
                <Skeleton height={10} width={25} />
                <Skeleton height={10} width={30} />
              </Stack>
              <Stack gap={0}>
                <Skeleton height={10} width={10} />
                <Skeleton height={10} width={15} />
              </Stack>
              <Stack gap={0}>
                <Skeleton height={10} width={10} />
                <Skeleton height={10} width={15} />
              </Stack>
              <Stack gap={0}>
                <Skeleton height={10} width={20} />
                <Skeleton height={10} width={25} />
              </Stack>
              <Stack gap={0}>
                <Skeleton height={10} width={25} />
                <Skeleton height={10} width={20} />
              </Stack>
              <Stack gap={0}>
                <Skeleton height={10} width={15} />
                <Skeleton height={10} width={25} />
              </Stack>
              <Stack gap={0}>
                <Skeleton height={10} width={15} />
                <Skeleton height={10} width={25} />
              </Stack>
            </Group>
          </Stack>
        </Group>
      </Group>
    </Box>
  );
};

const PlayerStatsTableSkeleton = () => {
  return (
    <Container size="100%" px={0}>
      <Stack gap="xs">
        <Box px="md" pb="xs">
          <Skeleton height={40} />
        </Box>

        <Group px="md" justify="space-between" align="center">
          <Skeleton height={12} width={100} />
          <Group 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;