import { Spinner, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
	CSS_STATE_CONTENT,
	CSS_HEADING,
	CSS_SUBTEXT,
	CSS_SPINNER_WRAP,
	CSS_TEXT_LINK,
} from '../../shared/constants';

export const AnalyzingView = ({ onCancel }: AnalyzingViewProps) => {
	return (
		<div className={CSS_STATE_CONTENT}>
			<h2 className={CSS_HEADING}>
				{__('Analyzing\u2026', 'cleardraft')}
			</h2>
			<p className={CSS_SUBTEXT}>
				{__(
					'Our AI is reviewing your article for legal risks',
					'cleardraft',
				)}
			</p>
			<div className={CSS_SPINNER_WRAP}>
				<Spinner />
			</div>
			<Button variant="link" className={CSS_TEXT_LINK} onClick={onCancel}>
				{__('Cancel', 'cleardraft')}
			</Button>
		</div>
	);
};

interface AnalyzingViewProps {
	onCancel: () => void;
}