import type { ReactNode } from 'react';

export interface DataTableColumn< T > {
	key: string;
	header: string;
	className?: string;
	render: ( row: T ) => ReactNode;
}

interface DataTableProps< T > {
	rows: T[];
	columns: Array< DataTableColumn< T > >;
	rowKey: ( row: T ) => string;
}

export const DataTable = < T, >( {
	rows,
	columns,
	rowKey,
}: DataTableProps< T > ) => (
	<div className="table-card">
		<table className="rt">
			<thead>
				<tr>
					{ columns.map( ( column ) => (
						<th key={ column.key } className={ column.className }>
							{ column.header }
						</th>
					) ) }
				</tr>
			</thead>
			<tbody>
				{ rows.map( ( row ) => (
					<tr key={ rowKey( row ) }>
						{ columns.map( ( column ) => (
							<td
								key={ column.key }
								className={ column.className }
								data-label={ column.header }
							>
								{ column.render( row ) }
							</td>
						) ) }
					</tr>
				) ) }
			</tbody>
		</table>
	</div>
);
