import { Box, Group, Paper, Skeleton } from "@mantine/core";
import type { MantineRadius } from "@mantine/core";

export interface CardSkeletonProps {
  withAvatar?: boolean;
  avatarSize?: number;
  withBadge?: boolean;
  radius?: MantineRadius;
  opacity?: number;
}

export const CardSkeleton = ({
  withAvatar = true,
  avatarSize = 32,
  withBadge = true,
  radius = "md",
  opacity = 1,
}: CardSkeletonProps) => {
  return (
    <Paper p="sm" withBorder radius={radius} style={{ opacity }}>
      <Group gap="sm" align="center" wrap="nowrap">
        {withAvatar && (
          <Skeleton height={avatarSize} width={avatarSize} radius="sm" />
        )}
        <Box style={{ flex: 1 }}>
          <Skeleton height={16} width="70%" mb={4} />
          <Skeleton height={12} width="40%" />
        </Box>
        {withBadge && <Skeleton height={20} width={60} radius="xl" />}
      </Group>
    </Paper>
  );
};

export default CardSkeleton;