import { Box, Skeleton, Text } from "@mantine/core";

const BadgeShowcaseSkeleton = () => {
  return (
    <Box mb="lg">
      <Box
        px="md"
        style={{
          maxHeight: '220px',
          overflowY: 'auto',
          overflowX: 'hidden',
          width: '100%',
        }}
      >
        <Box
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(85px, 1fr))',
            gap: 'var(--mantine-spacing-md)',
            paddingBottom: 'var(--mantine-spacing-sm)',
            width: '100%',
          }}
        >
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <Box
              key={i}
              style={{
                aspectRatio: '1',
                position: 'relative',
              }}
            >
              <Skeleton
                height="100%"
                radius="12px"
                style={{
                  aspectRatio: '1',
                }}
              />
            </Box>
          ))}
        </Box>
      </Box>
    </Box>
  );
};

export default BadgeShowcaseSkeleton;
