'use client';
import { Skeleton } from "@/components/ui/skeleton"

interface TableSkeletonProps {
    rowCount?: number
    columnCount: number
    hasActions?: boolean
}

export function TableSkeleton({
    rowCount = 10,
    columnCount,
    hasActions = true
}: TableSkeletonProps) {
    return (
        <>
            {Array.from({ length: rowCount }).map((_, rowIndex) => (
                <tr key={rowIndex} className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                    {Array.from({ length: columnCount }).map((_, colIndex) => (
                        <td key={colIndex} className="p-2 align-middle">
                            <Skeleton className="h-4 w-[100px]" />
                        </td>
                    ))}
                    {hasActions && (
                        <td className="p-2 align-middle">
                            <div className="flex gap-2">
                                <Skeleton className="h-7 w-7" />
                                <Skeleton className="h-7 w-7" />
                            </div>
                        </td>
                    )}
                </tr>
            ))}
        </>
    )
}