import { cn } from '../../shared/utils';

/**
 * Pulsing placeholder block for loading states.
 *
 * @description
 * Creates a pulsing shimmer animation to simulate the future layout of a page
 * while the primary data request is in flight. Prevents layout shift.
 *
 * @ai-rules
 * 1. `<Skeleton>` has NO sub-components — it is always self-closing: `<Skeleton />`.
 * 2. Control dimensions via Tailwind classes: `className="h-10 w-24 rounded-md"`.
 * 3. Match the skeleton shape closely to the real content it replaces.
 */
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('bg-accent animate-pulse rounded-md', className)}
      {...props}
    />
  );
}

export { Skeleton };
