import VirtuallyList from "@/components/CommonComponents/VirtuallyList";

const VirtuallyListDemo = () => {
	let listData: Array<any> = [];
	for (let i = 0; i < 10000; i++) {
		listData.push({
			name: "data" + i,
			id: "data" + i,
		});
	}
	const renderRow = ({
		index,
		isScrolling,
		isVisible,
		key,
		parent,
		style,
	}: any) => {
		// const name = listData[index].name;

		// // const content = isScrolling ? "..." : <div>{name}</div>;
		// const content = <div>{name}</div>;
		return (
			<div key={key} style={style}>
				<div
					style={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
					}}
				>
					<div>{listData[index].name}</div>
					<div>{listData[index].name}</div>
					<div>{listData[index].name}</div>
					<div>{listData[index].name}</div>
					<div>{listData[index].name}</div>
					<div>{listData[index].name}</div>
					<div>{listData[index].name}</div>
				</div>
			</div>
		);
	};
	return (
		<div>
			<div>
				<VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>;
			</div>
			<div style={{ width: "300px", height: "300px", overflow: "auto" }}>
				{listData.map((item, index) => {
					return (
						<div
							key={index}
							style={{
								display: "flex",
								justifyContent: "space-between",
								alignItems: "center",
							}}
						>
							<div>{listData[index].name}</div>
							<div>{listData[index].name}</div>
							<div>{listData[index].name}</div>
							<div>{listData[index].name}</div>
							<div>{listData[index].name}</div>
							<div>{listData[index].name}</div>
							<div>{listData[index].name}</div>
						</div>
					);
				})}
			</div>
		</div>
	);
};

export default VirtuallyListDemo;
