import { useState, useEffect, useMemo } from "react";
import MyTable from "@/components/mui/MyTableNew";

type IDatasetTableProps = {
	list: Array<any>;
	showData: Array<string>;
};

const DatasetTable = (props: IDatasetTableProps) => {
	console.log(window.innerWidth);
	const { list, showData } = props;
	const headCells = useMemo(() => {
		// let width = showData.length === 0 ? "100%" : `${100 / showData.length}%`;
		let width =
			showData.length === 0
				? "100%"
				: `${(window.innerWidth - 112) / showData.length}px`;
		return showData.map((item, index) => {
			return {
				id: item,
				label: item,
				width,
				showOverflowTooltip: true,
				// width: index ? width : "",
				// width: "100%",
				// width: "200px",
				sort: true,
			};
		});
	}, [showData]);
	return (
		<MyTable
			rows={list}
			headCells={headCells}
			hasCheckbox={true}
			fixedHead={true}
		></MyTable>
	);
};

export default DatasetTable;
