import { Card, Group, Skeleton, Stack } from "@mantine/core";

export interface StatTileSkeletonProps {
  withCard?: boolean;
  align?: "row" | "column";
  numberWidth?: number;
  numberHeight?: number;
  labelWidth?: number;
  labelHeight?: number;
}

export const StatTileSkeleton = ({
  withCard = false,
  align = "column",
  numberWidth = align === "row" ? 36 : 48,
  numberHeight = 28,
  labelWidth = align === "row" ? 110 : 80,
  labelHeight = align === "row" ? 14 : 12,
}: StatTileSkeletonProps) => {
  const content =
    align === "row" ? (
      <Group gap="xs" align="baseline">
        <Skeleton height={numberHeight} width={numberWidth} radius="sm" />
        <Skeleton height={labelHeight} width={labelWidth} radius="sm" />
      </Group>
    ) : (
      <Stack gap={4} align="center">
        <Skeleton height={numberHeight} width={numberWidth} radius="sm" />
        <Skeleton height={labelHeight} width={labelWidth} radius="sm" />
      </Stack>
    );

  if (!withCard) return content;

  return (
    <Card withBorder radius="md" p="md">
      {content}
    </Card>
  );
};

export default StatTileSkeleton;