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 surface is `surface-2`.
 */
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      aria-hidden="true"
      className={cn('animate-pulse rounded-md bg-surface-2', className)}
      {...props}
    />
  );
}

export { Skeleton };
