import * as React from 'react';

import { cn } from '@/lib/utils';

/**
 * `bg-muted` would be wrong here: in this palette `muted` is the muted TEXT
 * colour, a mid grey that reads as a filled block rather than a placeholder.
 * The placeholder ground is `surface-3` — one step above the card it sits in,
 * so it reads on a surface in both themes (spec §9).
 */
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      aria-hidden="true"
      className={cn('animate-pulse rounded-md bg-surface-3', className)}
      {...props}
    />
  );
}

export { Skeleton };
