import * as React from 'react';
import { clsx } from 'clsx';

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  shape?: 'block' | 'text' | 'circle';
}

export function Skeleton({ shape = 'block', className, ...props }: SkeletonProps) {
  return (
    <div
      aria-hidden="true"
      className={clsx(
        'animate-pulse bg-[var(--bl-surface-muted)]',
        shape === 'text' && 'h-4 rounded-full',
        shape === 'block' && 'min-h-20 rounded-xl',
        shape === 'circle' && 'h-10 w-10 rounded-full',
        className
      )}
      {...props}
    />
  );
}

export function TableSkeleton({ rows = 5 }: { rows?: number }) {
  return (
    <div className="grid gap-2">
      {Array.from({ length: rows }).map((_, index) => (
        <Skeleton key={index} className="h-12 min-h-0" />
      ))}
    </div>
  );
}