import { Box, Paper } from "@mui/material";
import { useEffect, useState } from "react";

import {
	ColumnProps,
	ReactVirtualizedTable,
} from "../../../components/VirtualizedTable";
import { EVENT_TABLE_CONTAINER_HEIGHT_IN_PIXELS } from "../../../constants";

interface Props<T> {
	columns: ColumnProps<T>[];
	data: T[];
}

export function EventTableContainer<T>({ columns, data }: Props<T>) {
	const [displayData, setDisplayData] = useState(data);

	useEffect(() => {
		setDisplayData(data);
	}, [data]);

	return (
		<Box
			sx={{
				width: "100%",
				overflow: "hidden",
			}}
			component={Paper}
		>
			<ReactVirtualizedTable
				columns={columns}
				data={displayData}
				height={EVENT_TABLE_CONTAINER_HEIGHT_IN_PIXELS}
			/>
		</Box>
	);
}
