import * as React from 'react'
import { cn } from '../../lib/utils'

export interface TableSkeletonProps {
  rows?: number
  columns?: number
  className?: string
}

export function TableSkeleton({
  rows = 5,
  columns = 4,
  className,
}: TableSkeletonProps) {
  return (
    <div className={cn('bg-background rounded-lg border', className)}>
      {/* Header skeleton */}
      <div className="p-4 border-b">
        <div className="flex justify-between items-center gap-4">
          <div className="h-10 w-full max-w-sm animate-pulse rounded-md bg-gray-200" />
          <div className="flex gap-2">
            <div className="h-10 w-24 animate-pulse rounded-md bg-gray-200" />
          </div>
        </div>
      </div>

      {/* Table body skeleton */}
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="border-b bg-muted/50">
            <tr>
              {Array.from({ length: columns }).map((_, i) => (
                <th key={i} className="p-4 text-left">
                  <div className="h-4 w-24 animate-pulse rounded-md bg-gray-200" />
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {Array.from({ length: rows }).map((_, rowIndex) => (
              <tr key={rowIndex} className="border-b last:border-b-0">
                {Array.from({ length: columns }).map((_, colIndex) => (
                  <td key={colIndex} className="p-4">
                    <div className="h-4 w-full max-w-[200px] animate-pulse rounded-md bg-gray-200" />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Pagination skeleton */}
      <div className="p-4 border-t flex justify-between items-center">
        <div className="h-4 w-40 animate-pulse rounded-md bg-gray-200" />
        <div className="flex gap-2">
          <div className="h-9 w-20 animate-pulse rounded-md bg-gray-200" />
          <div className="h-9 w-20 animate-pulse rounded-md bg-gray-200" />
        </div>
      </div>
    </div>
  )
}