import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { Button } from '../../shared/ui/Button';
import { useCloseOverlay } from '../../shared/ui/overlayClose';
import { FIX_ALL_TITLE_ID } from './fixAllTitle';

export function FailedStep( { message }: { message: string } ): JSX.Element {
	const closeOverlay = useCloseOverlay();

	return (
		<>
			<div className="sec">
				<h2 id={ FIX_ALL_TITLE_ID }>
					{ __( 'This did not work', 'aiplaz-link-checkup' ) }
				</h2>
				<p className="muted">{ message }</p>
			</div>
			<div className="modal-actions">
				<Button variant="primary" onClick={ closeOverlay }>
					{ __( 'Close', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
		</>
	);
}