import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";

export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
	const table = useReactTable({
		data,
		columns: columns,
		getCoreRowModel: getCoreRowModel(),
		getSortedRowModel: getSortedRowModel(),
	});

	return (
		<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
			<thead>
				{table.getHeaderGroups().map((headerGroup) => (
					<tr key={headerGroup.id}>
						{headerGroup.headers.map((header) => (
							<th key={header.id} colSpan={header.colSpan}>
								{header.isPlaceholder ? null : (
									<>
										<div
											{...{
												className: header.column.getCanSort() ? "cursor-pointer select-none py-4 text-left first:pl-4" : "",
												onClick: header.column.getToggleSortingHandler(),
											}}>
											{flexRender(header.column.columnDef.header, header.getContext())}
											{{
												asc: " 🔼",
												desc: " 🔽",
											}[header.column.getIsSorted() as string] ?? null}
										</div>
									</>
								)}
							</th>
						))}
					</tr>
				))}
			</thead>
			<tbody className="px-2">
				{table.getRowModel().rows.map((row) => (
					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
						{row.getVisibleCells().map((cell) => (
							<td className="px-4 py-2" key={cell.id}>
								{flexRender(cell.column.columnDef.cell, cell.getContext())}
							</td>
						))}
					</tr>
				))}
			</tbody>
		</table>
	);
}