import React from "react";
import { Skeleton } from "@/components/ui/skeleton";

/**
 * ExplorerLoading
 *
 * Loading placeholder for Explorer lists.
 * Supports a grid and a table-like variant.
 *
 * @param {{ variant?: "grid"|"table", count?: number }} props
 */
export default function ExplorerLoading({ variant = "grid", count = 8 }) {
	const n = Number.isInteger(count) && count > 0 ? count : 8;

	if (variant === "table") {
		return (
			<div className="space-y-2">
				{Array.from({ length: n }).map((_, i) => (
					<div key={i} className="flex items-center justify-between gap-3">
						<div className="flex min-w-0 flex-1 items-center gap-2">
							<Skeleton className="h-4 w-4" />
							<Skeleton className="h-4 w-[60%]" />
						</div>
						<Skeleton className="h-8 w-24" />
					</div>
				))}
			</div>
		);
	}

	return (
		<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
			{Array.from({ length: n }).map((_, i) => (
				<Skeleton key={i} className="h-10 w-full" />
			))}
		</div>
	);
}