import { HistoryItemSkeleton } from "./HistoryItemSkeleton";

interface HistorySkeletonLoaderProps {
	/** Number of skeleton items to display. Defaults to 3 */
	count?: number;
	/** Additional CSS classes to apply to the container */
	className?: string;
}

export const HistorySkeletonLoader = ({
	count = 3,
	className = "",
}: HistorySkeletonLoaderProps) => {
	return (
		<div className={`bn-space-y-2 ${className}`}>
			{Array.from({ length: count }, (_, index) => (
				<HistoryItemSkeleton key={`history-skeleton-${Date.now()}-${index}`} />
			))}
		</div>
	);
};
