import React from 'react';
import ReactMarkdown from 'react-markdown';

interface Props {
	fullbredde?: boolean;
	tekst: string;
	suppress?: boolean;
}

function Formatering(props: Props) {
	const { fullbredde, tekst, suppress = false } = props;
	const options: {
		'data-hj-suppress'?: boolean;
	} = {
		'data-hj-suppress': suppress,
	};
	if (!suppress) {
		delete options['data-hj-suppress'];
	}
	return (
		<div
			className={
				(fullbredde ? '' : 'util-leselengde ') +
				'brodtekst-med-bottom-margin'
			}
			{...options}
		>
			<ReactMarkdown
				components={{
					link: (props) => {
						if (props?.href?.startsWith('http')) {
							return (
								<a
									href={props.href}
									rel="nofollow noreferrer noopener"
									target="_blank"
								>
									{props.children}
								</a>
							);
						}
						return <a href={props.href}>{props.children}</a>;
					},
				}}
				children={tekst}
			/>
		</div>
	);
}

export { Formatering };