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

export default function CatalogDetailLoading() {
	return (
		<div className="space-y-6">
			{/* Breadcrumb */}
			<div className="flex items-center gap-2">
				<Skeleton className="h-4 w-16" />
				<Skeleton className="h-4 w-4" />
				<Skeleton className="h-4 w-24" />
				<Skeleton className="h-4 w-4" />
				<Skeleton className="h-4 w-20" />
			</div>

			{/* Title */}
			<div>
				<Skeleton className="h-9 w-64" />
				<Skeleton className="h-5 w-40 mt-2" />
			</div>

			{/* Tabs */}
			<div className="space-y-4">
				<div className="flex gap-2 border-b pb-2">
					{Array.from({ length: 4 }, (_, i) => i).map((n) => (
						<Skeleton
							key={`skeleton-tab-${n}`}
							className="h-9 w-24 rounded-md"
						/>
					))}
				</div>

				{/* Tab content */}
				<div className="rounded-lg border bg-card p-6 space-y-4">
					{Array.from({ length: 6 }, (_, i) => i).map((n) => (
						<div key={`skeleton-field-${n}`} className="space-y-2">
							<Skeleton className="h-4 w-24" />
							<Skeleton className="h-10 w-full" />
						</div>
					))}
				</div>
			</div>
		</div>
	);
}