interface TableLoadingProps {
  className?: string;
  rows?: number;
  columns?: number;
}

export function TableLoading({
  className,
  rows = 5,
  columns = 4,
}: TableLoadingProps) {
  return (
    <div className={className ?? "w-full p-4"}>
      <div className="space-y-4">
        {Array.from({ length: rows }).map((_, rowIndex) => (
          <div key={rowIndex} className="flex items-center gap-4">
            {Array.from({ length: columns }).map((_, colIndex) => (
              <div
                key={colIndex}
                className="h-10 flex-1 animate-pulse rounded bg-gray-200"
                style={{
                  maxWidth: colIndex === 0 ? "20%" : undefined,
                }}
              />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}
