// @design-system: feedback/Skeleton
/**
 * Skeleton — pulsing placeholder for loading states.
 *
 * Uses `--color-skeleton-base` design token (defined in tokens.css).
 * Animation disabled for `prefers-reduced-motion: reduce` per WCAG 2.3.3.
 *
 * @example
 * <Skeleton className="h-4 w-32" />
 * <Skeleton variant="circle" className="size-10" />
 * <Skeleton variant="text" />
 */

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

export interface SkeletonProps {
  /** Shape variant. @default 'rect' */
  variant?: 'rect' | 'circle' | 'text';
  className?: string;
}

export function Skeleton({ variant = 'rect', className }: SkeletonProps) {
  return (
    <span
      aria-hidden="true"
      role="presentation"
      className={cn(
        'block bg-[var(--color-skeleton-base)]',
        // Pulse animation — disabled on reduced-motion
        'animate-pulse motion-reduce:animate-none',
        variant === 'circle' && 'rounded-full',
        variant === 'text' && 'h-[1em] w-full rounded-sm',
        variant === 'rect' && 'rounded-md',
        className,
      )}
    />
  );
}