import * as React from 'react'
import { cn } from '../lib/cn'

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}

/**
 * Token-driven loading placeholder. The shimmer pulse is suppressed under
 * prefers-reduced-motion via `motion-reduce:animate-none`.
 */
export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      aria-hidden="true"
      className={cn('animate-pulse motion-reduce:animate-none rounded bg-hover', className)}
      {...props}
    />
  ),
)
Skeleton.displayName = 'Skeleton'