import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../shared/api/types/status';
import type { View } from '../shared/lib/route';
import { Icon } from '../shared/ui/Icon';
import { HeaderTabs } from './HeaderTabs';
import { ScanButton } from './ScanButton';

type HeaderProps = {
	view: View;
	status: Status | undefined;
};

export function Header( { view, status }: HeaderProps ): JSX.Element {
	const showsSections = status !== undefined && ! status.first_run;

	return (
		<header className="bar">
			<div className="brand">
				<span className="logo">
					<Icon name="link" />
				</span>
				{ __( 'Aiplaz Link Checkup', 'aiplaz-link-checkup' ) }
			</div>
			{ status?.first_run !== true && (
				<HeaderTabs
					view={ view }
					brokenCount={ status?.counts.broken ?? 0 }
				/>
			) }
			<div className="bar-right">
				{ showsSections && (
					<ScanButton scanState={ status.scan.state } />
				) }
			</div>
		</header>
	);
}