import type { HTMLAttributes } from 'react'

import { classNames } from '../lib/class-names'

export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
  readonly shape?: 'text' | 'rectangle' | 'circle'
}

export function Skeleton({
  shape = 'text',
  className,
  ...props
}: SkeletonProps) {
  return (
    <span
      className={classNames(
        'drb-skeleton',
        `drb-skeleton--${shape}`,
        className,
      )}
      {...props}
      aria-hidden="true"
    />
  )
}