import React from 'react';
import { VerdiEllerInfoMangler } from './VerdiEllerInfoMangler';

interface Props {
	overskrifter: string[];
	data: { kolonner: React.ReactNode[]; markerEndring: boolean }[];
	className?: string[] | string;
	kolonner?: number;
	skalMaskeres?: boolean;
	visOmVerdiMangler?: boolean;
}

function OppsummeringTabell({
	overskrifter,
	data,
	className,
	kolonner,
	skalMaskeres,
	visOmVerdiMangler = true,
	...rest
}: Props) {
	return (
		<table
			{...rest}
			className={`oppsummering-tabell ${
				kolonner ? `kolonner-${kolonner}` : ''
			} ${className}`}
		>
			<thead>
				<tr>
					{overskrifter.map((overskrift) => (
						<th key={overskrift}>{overskrift}</th>
					))}
				</tr>
			</thead>
			<tbody {...(!!skalMaskeres ? { 'data-hj-suppress': true } : {})}>
				{data.map((rad, i) => {
					return (
						<tr key={i}>
							{rad.kolonner.map((celle, j) => (
								<td
									key={j}
									style={{ border: 'none' }}
									className={
										rad.markerEndring
											? 'saksbehandling-redigert-informasjon-liste'
											: ''
									}
								>
									{visOmVerdiMangler ? (
										<VerdiEllerInfoMangler>
											{celle}
										</VerdiEllerInfoMangler>
									) : (
										celle
									)}
								</td>
							))}
						</tr>
					);
				})}
			</tbody>
		</table>
	);
}

export { OppsummeringTabell };