import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { View } from '../shared/lib/route';
import { navigate } from '../shared/lib/router';
import { formatNumber } from '../shared/lib/numbers';
import { sectionTabs } from './sectionTabs';

type HeaderTabsProps = {
	view: View;
	brokenCount: number;
};

export function HeaderTabs( {
	view,
	brokenCount,
}: HeaderTabsProps ): JSX.Element {
	return (
		<div
			className="tabs"
			role="tablist"
			aria-label={ __(
				'Aiplaz Link Checkup sections',
				'aiplaz-link-checkup'
			) }
		>
			{ sectionTabs().map( ( tab ) => (
				<button
					key={ tab.view }
					type="button"
					className="tab"
					role="tab"
					aria-selected={ view === tab.view }
					onClick={ () => {
						navigate( tab.view );
					} }
				>
					{ tab.label }
					{ tab.view === 'links' && brokenCount > 0 && (
						<span className="tab-count num">
							{ formatNumber( brokenCount ) }
						</span>
					) }
				</button>
			) ) }
		</div>
	);
}