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

export function EditorPicture(): JSX.Element {
	return (
		<div className="editor" aria-hidden="true">
			<div className="editor-notice">
				<Icon name="unlink" />
				<span>
					<b>
						{ __(
							'1 broken link in this post.',
							'aiplaz-link-checkup'
						) }
					</b>
					{ ` ${ __( 'Fix it before you publish.', 'aiplaz-link-checkup' ) }` }
				</span>
			</div>
			<div className="editor-body">
				<div className="editor-title">Summer gift guide</div>
				<p>
					Looking for ideas? Take a look at the{ ' ' }
					<mark>summer sale</mark> before the end of the month.
				</p>
				<div className="editor-pop">
					<div>
						<StatusPill problem="broken" />
					</div>
					<span>
						<b>partner-shop.example/summer-sale</b>
						<br />
						<span className="muted">
							{ __(
								'Page not found. Checked a moment ago.',
								'aiplaz-link-checkup'
							) }
						</span>
					</span>
					<div className="actions">
						<span className="btn btn-primary btn-sm">
							{ __( 'Change link', 'aiplaz-link-checkup' ) }
						</span>
						<span className="btn btn-ghost btn-sm">
							<Icon name="unlink" />
							{ __( 'Remove link', 'aiplaz-link-checkup' ) }
						</span>
					</div>
				</div>
			</div>
		</div>
	);
}