import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { LinkSelection } from './useLinkSelection';

type LinksTableHeadProps = {
	selection: LinkSelection;
	isEverySelected: boolean;
};

export function LinksTableHead( {
	selection,
	isEverySelected,
}: LinksTableHeadProps ): JSX.Element {
	return (
		<div className="row row-head">
			<input
				className="check"
				type="checkbox"
				aria-label={ __( 'Select all', 'aiplaz-link-checkup' ) }
				checked={ isEverySelected }
				onChange={ ( event ) => {
					if ( event.target.checked ) {
						selection.selectAll();
					} else {
						selection.clear();
					}
				} }
			/>
			<span>{ __( 'Link', 'aiplaz-link-checkup' ) }</span>
			<span className="c-pill">
				{ __( 'Problem', 'aiplaz-link-checkup' ) }
			</span>
			<span className="c-used">
				{ __( 'Used in', 'aiplaz-link-checkup' ) }
			</span>
			<span className="c-time">
				{ __( 'Checked', 'aiplaz-link-checkup' ) }
			</span>
			<span />
		</div>
	);
}