import React from 'react';
import { ledetekst } from '../diverse/Ledetekst.js';

interface Props {
	tittel: string;
	merknad?: string;
	ikon?: string;
	redigeringsLenke?: string | boolean;
	valideringsfeil?: React.ReactNode;
	ingenBakgrunn?: boolean;
	children?: React.ReactNode;
}

function OppsummeringBlokk(props: Props) {
	const {
		tittel,
		merknad,
		ikon,
		redigeringsLenke,
		valideringsfeil,
		ingenBakgrunn,
		children,
		...rest
	} = props;

	const harInnhold = !!children;

	return (
		<section
			{...rest}
			className={`oppsummering-blokk ${
				valideringsfeil ? 'har-valideringsfeil' : ''
			}`}
		>
			<div className={'oppsummering-blokk-tittel'}>
				<div>
					<h3 className={`${ikon ? ikon : ''}`}>{tittel}</h3>
					{merknad && <small className="merknad">{merknad}</small>}
				</div>
				{redigeringsLenke && (
					<a
						className={'ikon-rediger'}
						href={redigeringsLenke as string}
					>
						{ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.oppsummeringblokk.rediger'
						)}
					</a>
				)}
			</div>
			<div className={'oppsummering-boks-wrapper'}>
				{valideringsfeil && (
					<div
						className={`oppsummering-valideringsfeil ${
							ingenBakgrunn ? 'ingen-bakgrunn' : ''
						}`}
					>
						{valideringsfeil}
					</div>
				)}
				{harInnhold && (
					<div className={'oppsummering-blokk-innhold'}>
						{children}
					</div>
				)}
			</div>
		</section>
	);
}

export { OppsummeringBlokk };