import { Skeleton, Stack } from "@mantine/core";
import classes from "./dashboard.module.css";

/** Matches DashboardCard's geometry so the grid doesn't reflow when data lands. */
const DashboardSkeletonCard: React.FC<{ index: number }> = ({ index }) => (
  <div
    className={`${classes.card} ${classes.enter}`}
    style={{ "--stagger": `${Math.min(index, 11) * 45}ms` } as React.CSSProperties}
    aria-hidden="true"
  >
    <div className={classes.cover}>
      <Skeleton height="100%" radius={0} />
    </div>
    <div className={classes.cardBody}>
      <Stack gap={8}>
        <Skeleton height={12} width="65%" radius="sm" />
        <Skeleton height={9} radius="sm" />
        <Skeleton height={9} width="80%" radius="sm" />
        <Skeleton height={9} width="40%" radius="sm" mt={4} />
      </Stack>
    </div>
  </div>
);

export default DashboardSkeletonCard;