import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { FixFirst } from './FixFirst';
import { Health } from './Health';
import { StatusColumn } from './StatusColumn';

export function DashboardView( { status }: { status: Status } ): JSX.Element {
	return (
		<section
			className="view"
			aria-label={ __( 'Dashboard', 'aiplaz-link-checkup' ) }
		>
			<div className="dash">
				<div className="col">
					<Health status={ status } />
					<FixFirst counts={ status.counts } />
				</div>
				<StatusColumn status={ status } />
			</div>
		</section>
	);
}