import {
  Stack,
  Container,
  Box,
  Divider,
  Grid,
  Skeleton,
} from '@mantine/core';

const BadgeStatsTableSkeleton = () => {
  return (
    <Container size='100%' px={0}>
      <Stack gap='xs'>
        <Stack gap={0}>
          {Array.from({ length: 15 }).map((_, index) => (
            <BadgeStatRowSkeleton
              key={`skeleton-${index}`}
              isLastRow={index >= 14}
            />
          ))}
        </Stack>
      </Stack>
    </Container>
  );
};

export default BadgeStatsTableSkeleton;

interface BadgeStatRowSkeletonProps {
  isLastRow: boolean;
}

const BadgeStatRowSkeleton: React.FC<BadgeStatRowSkeletonProps> = ({
  isLastRow,
}) => {
  return (
    <Box>
      <Grid p={'xs'} align='center'>
        <Grid.Col span={2} style={{ display: 'flex', alignItems: 'center' }}>
          <Skeleton circle height={48} width={48} />
        </Grid.Col>
        <Grid.Col span={'auto'}>
          <Stack gap={8}>
            <Skeleton height={16} width='60%' />
            <Skeleton height={14} width='80%' />
            <Skeleton height={12} width='50%' mt={4} />
          </Stack>
        </Grid.Col>
        <Grid.Col
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            width: '73px',
            flexBasis: '73px',
          }}
        >
          <Stack gap={4} align='center'>
            <Skeleton height={20} width={40} />
            <Skeleton height={12} width={50} />
          </Stack>
        </Grid.Col>
      </Grid>
      {!isLastRow && <Divider />}
    </Box>
  );
};
