import React, {useCallback} from "react";

export function ListLoader({count, itemContent}: {
	/**
	 * Sample items count.
	 * 3 by default.
	 */
	count?: number;

	/**
	 * Sample items content or content generator function.
	 */
	itemContent?: React.ReactNode|((key: number) => React.ReactNode);
})
{
	// Sample items count. 3 by default.
	count = count === undefined ? 3 : count;

	// Initialize the sample content generator.
	const contentGenerator = useCallback((key: number) => (
		typeof itemContent != "function"
			// No function given, return the given content or a sample text.
			? (itemContent ?? "Loading content...")
			// A function have been given, just return its result.
			: itemContent(key)
	), [itemContent]);

	return (
		<ul className={"list loader"}>
			{ // Render every sample item.
				[...Array(count)].map((_, key) => (
					<li key={key}><div className={"content"}>{contentGenerator(key)}</div></li>
				))
			}
		</ul>
	);
}