import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { useScanAction } from '../../shared/api/useScanAction';
import { Button } from '../../shared/ui/Button';

export function StartFirstScan(): JSX.Element {
	const scanAction = useScanAction();

	return (
		<>
			<div className="actions">
				<Button
					variant="primary"
					size="lg"
					icon="scan"
					busy={ scanAction.isPending }
					onClick={ () => {
						scanAction.mutate( 'start' );
					} }
				>
					{ __( 'Start the first scan', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
			<p className="muted">
				{ __(
					'It takes a few minutes on most sites. You can close the page while it runs.',
					'aiplaz-link-checkup'
				) }
			</p>
		</>
	);
}