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

function Skeleton({
  className,
  children,
  isLoading = true,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & { isLoading?: boolean }) {
  return (
    <div
      className={cn('relative inline-block align-top', className)}
      {...props}
    >
      <div className={cn({ invisible: isLoading })}>
        {children ?? <span className="block h-4 w-24" />}
      </div>
      {isLoading && (
        <div
          aria-hidden
          className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
        />
      )}
    </div>
  );
}

export { Skeleton };