import { type HTMLAttributes, forwardRef } from 'react'
import { cn } from '@/shared/lib/cn'

/**
 * Заглушка блока на время загрузки. Только форма — размеры задаёт вызывающий код, чтобы скелетон
 * повторял реальную вёрстку и страница не прыгала при появлении данных.
 */
export const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      // Скелетон — визуальный шум для скринридера: статус загрузки объявляет контейнер.
      aria-hidden
      className={cn('animate-pulse rounded-sm bg-muted-foreground/20', className)}
      {...props}
    />
  ),
)
Skeleton.displayName = 'Skeleton'
