import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { Button } from '../../shared/ui/Button';
import { useCloseOverlay } from '../../shared/ui/overlayClose';
import { useAutofocus } from '../../shared/ui/useAutofocus';
import { EditorPicture } from './EditorPicture';
import { EDITOR_PREVIEW_TITLE_ID } from './editorPreviewTitle';

export function EditorPreview(): JSX.Element {
	const closeOverlay = useCloseOverlay();
	const autofocus = useAutofocus< HTMLButtonElement >();

	return (
		<div className="modal">
			<div className="sec">
				<h2 id={ EDITOR_PREVIEW_TITLE_ID }>
					{ __( 'Warning while you write', 'aiplaz-link-checkup' ) }
				</h2>
				<p className="muted">
					{ __(
						'This is what you see in the post editor when a link in your post is broken.',
						'aiplaz-link-checkup'
					) }
				</p>
			</div>
			<EditorPicture />
			<div className="modal-actions">
				<Button
					{ ...autofocus }
					variant="primary"
					onClick={ closeOverlay }
				>
					{ __( 'Close', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
		</div>
	);
}