import type { JSX } from 'react';
import type { LinkDetail } from '../../shared/api/types/links';
import { linkName } from '../../shared/links/linkName';
import type { Problem } from '../../shared/links/problem';
import { reasonText } from '../../shared/links/reasonText';
import { whyText } from './problemTexts';
import { FIX_PANEL_TITLE_ID } from './fixPanelTitle';

const REASON_STYLE = { color: 'var(--ink)' };

type FixSummaryProps = {
	link: LinkDetail;
	problem: Problem;
};

export function FixSummary( { link, problem }: FixSummaryProps ): JSX.Element {
	return (
		<div className="sec">
			<h2 className="drawer-url" id={ FIX_PANEL_TITLE_ID }>
				{ linkName( link.url ) }
			</h2>
			<p className="muted">
				<b style={ REASON_STYLE }>{ reasonText( link ) }.</b>
				{ ` ${ whyText( problem ) }` }
			</p>
		</div>
	);
}