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

/**
 * Placeholder that mirrors {@link CampaignAnalyticsCard}'s layout (header +
 * two ~220px chart areas with a legend list) so the page reserves the same
 * space while analytics load. Swapping this for the real card causes no
 * visible layout shift.
 */
export function AnalyticsCardSkeleton() {
  return (
    <Card withBorder radius="lg" p="md" mb="md">
      <Group justify="space-between" mb="xs" align="flex-start">
        <Skeleton height={20} width={90} radius="sm" />
        <Skeleton height={26} width={120} radius="xl" />
      </Group>
      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
        <div>
          <Skeleton height={12} width={150} radius="sm" mb="sm" />
          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
            <Skeleton height={220} radius="md" />
            <Stack gap={10} mt={6}>
              {Array.from({ length: 5 }).map((_, i) => (
                <Skeleton key={i} height={14} radius="sm" />
              ))}
            </Stack>
          </SimpleGrid>
        </div>
        <div>
          <Skeleton height={12} width={170} radius="sm" mb="sm" />
          <Skeleton height={220} radius="md" />
        </div>
      </SimpleGrid>
    </Card>
  );
}