import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Problem } from '../../shared/links/problem';
import { StatusPill } from '../../shared/links/ProblemBadges';
import { Button } from '../../shared/ui/Button';
import { Icon } from '../../shared/ui/Icon';
import { useCloseOverlay } from '../../shared/ui/overlayClose';

export function FixPanelHead( {
	problem,
}: {
	problem: Problem | null;
} ): JSX.Element {
	const closeOverlay = useCloseOverlay();

	return (
		<div className="drawer-head">
			{ problem === null ? <span /> : <StatusPill problem={ problem } /> }
			<Button
				variant="quiet"
				className="btn-icon"
				aria-label={ __( 'Close', 'aiplaz-link-checkup' ) }
				onClick={ closeOverlay }
			>
				<Icon name="x" />
			</Button>
		</div>
	);
}