import React from 'react';
import { Ramme } from '../..';
import { ledetekst } from '../../diverse/Ledetekst';
import { useTilbakemeldingerForSteg } from './TilbakemeldingContext';

interface Props {
	steg: string; // TODO Type opp med korrekte steg-punkter
}

function TilbakemeldingForSteg({ steg }: Props) {
	const tilbakemeldinger = useTilbakemeldingerForSteg(steg);

	if (tilbakemeldinger?.innhold?.length === 0) {
		return null;
	}

	return (
		<>
			<Ramme grafarge>
				<div className="infoboks-tilbakemelding">
					<div className="nota-bene">
						<p>
							<b>
								{ledetekst.getTekst(
									'arbeidsvarsling.frontendkomponenter.tilbakemelding.tilbakemeldingFraSaksbehandler'
								)}
							</b>
						</p>
					</div>

					{tilbakemeldinger?.innhold?.map((innhold, i) => {
						return (
							<p
								data-hj-suppress
								className="util-leselengde"
								style={{
									whiteSpace: 'pre-wrap',
									wordBreak: 'break-word',
								}}
								key={i}
							>
								{innhold}
							</p>
						);
					})}
				</div>
			</Ramme>
		</>
	);
}

export { TilbakemeldingForSteg };