import { Skeleton } from "../../components/ui/skeleton";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "../../components/ui/table";

type TableSkelly = {
	rows?: number;
	columns?: number;
};
export default function SkellyTable({ rows = 5, columns = 4 }: TableSkelly) {
	return (
		<div className="rounded-md border">
			<Table>
				<TableHeader>
					<TableRow>
						{Array.from({ length: columns }).map((_, i) => (
							<TableHead key={i}>
								<Skeleton className="h-4 w-[80px]" />
							</TableHead>
						))}
					</TableRow>
				</TableHeader>
				<TableBody>
					{Array.from({ length: rows }).map((_, r) => (
						<TableRow key={r}>
							{Array.from({ length: columns }).map((_, c) => (
								<TableCell key={c}>
									<Skeleton className="h-4 w-full max-w-[120px]" />
								</TableCell>
							))}
						</TableRow>
					))}
				</TableBody>
			</Table>
		</div>
	);
}