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

function Skeleton({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn('relative inline-block align-top', className)}
      {...props}
    >
      <div className="invisible">
        {children ?? <span className="block h-4 w-24" />}
      </div>

      <div
        aria-hidden
        className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
      />
    </div>
  );
}

export { Skeleton };