import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { Icon } from '../../shared/ui/Icon';
import { ScanProgress } from './ScanProgress';
import { StartFirstScan } from './StartFirstScan';
import { welcomePoints } from './welcomePoints';

export function WelcomeView( { status }: { status: Status } ): JSX.Element {
	return (
		<section
			className="view"
			aria-label={ __( 'First run', 'aiplaz-link-checkup' ) }
		>
			<div className="panel welcome">
				<span className="welcome-mark">
					<Icon name="link" />
				</span>
				<h1 className="display">
					{ __(
						'Find the broken links on your site',
						'aiplaz-link-checkup'
					) }
				</h1>
				<p className="lede">
					{ __(
						'Aiplaz Link Checkup reads your posts and pages, tests every link, and shows you what to fix.',
						'aiplaz-link-checkup'
					) }
				</p>
				<ul className="welcome-points">
					{ welcomePoints().map( ( point ) => (
						<li key={ point.icon }>
							<Icon name={ point.icon } />
							<span>
								<b>{ point.title }</b>
								{ ` ${ point.text }` }
							</span>
						</li>
					) ) }
				</ul>
				<div className="welcome-scan">
					{ status.scan.state === 'idle' ? (
						<StartFirstScan />
					) : (
						<ScanProgress scan={ status.scan } />
					) }
				</div>
			</div>
		</section>
	);
}