import CardTable from "@/components/CommonComponents/CardTable";
import VrituallyCardTable from "@/components/CommonComponents/VrituallyCardTable";

const CardTableDemo = () => {
	const list = [
		{
			id: 1,
		},
		{
			id: 2,
		},
		{
			id: 3,
		},
		{
			id: 4,
		},
		{
			id: 5,
		},
		{
			id: 6,
		},
		{
			id: 7,
		},
		{
			id: 8,
		},
		{
			id: 9,
		},
		{
			id: 10,
		},
		{
			id: 11,
		},
		{
			id: 12,
		},
		{
			id: 13,
		},
	];
	const renderItem = (item: any) => {
		return (
			<div
				style={{
					border: "1px solid red",
					height: "200px",
					boxSizing: "border-box",
				}}
			>
				{item.id}
			</div>
		);
	};
	return (
		<div>
			CardTableDemo
			<div style={{ height: "600px" }}>
				<VrituallyCardTable
					data={list}
					renderItem={renderItem}
					numberOfColumns={4}
					rowHeight={220}
				></VrituallyCardTable>
			</div>
			<CardTable
				data={list}
				renderItem={renderItem}
				numberOfColumns={4}
			></CardTable>
		</div>
	);
};

export default CardTableDemo;
