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

export const ResubmitConfirmView = ({
	onResubmit,
	onCancel,
}: ResubmitConfirmViewProps) => {
	return (
		<div className={CSS_STATE_CONTENT}>
			<h2 className={CSS_HEADING}>
				{__('Legal Risk Review', 'cleardraft')}
			</h2>
			<p className={CSS_SUBTEXT}>
				{__(
					'Submit your content for legal analysis. We will check for potential defamation, privacy violations, and other legal issues.',
					'cleardraft',
				)}
			</p>
			<div
				className={`${CSS_METADATA_CARD} cleardraft-warning-text`}
				role="alert"
				aria-live="assertive"
				aria-atomic="true"
			>
				{__(
					'This content has been previously analyzed. Would you like to resubmit?',
					'cleardraft',
				)}
			</div>
			<Button className={CSS_PRIMARY_BUTTON} onClick={onResubmit}>
				{__('Resubmit', 'cleardraft')}
			</Button>
			<Button variant="link" className={CSS_TEXT_LINK} onClick={onCancel}>
				{__('Nevermind', 'cleardraft')}
			</Button>
		</div>
	);
};

interface ResubmitConfirmViewProps {
	onResubmit: () => void;
	onCancel: () => void;
}