import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Link } from '../../shared/api/types/links';
import { linkName } from '../../shared/links/linkName';
import { problemOf } from '../../shared/links/problem';
import { StatusDot } from '../../shared/links/ProblemBadges';
import { reasonText } from '../../shared/links/reasonText';
import { openFixPanel } from '../../shared/links/openFixPanel';
import { placesPhrase } from '../../shared/text/countedPhrases';
import { Button } from '../../shared/ui/Button';

export function FixFirstItem( { link }: { link: Link } ): JSX.Element {
	const openPanel = () => {
		openFixPanel( link.id );
	};

	return (
		<div className="item">
			<StatusDot problem={ problemOf( link ) } />
			<div className="item-main">
				<button
					type="button"
					className="linkname"
					onClick={ openPanel }
				>
					{ linkName( link.url ) }
				</button>
				<span className="item-sub">{ reasonText( link ) }</span>
			</div>
			<span className="item-used">
				{ sprintf(
					/* translators: %s: number of places, for example "3 places" */
					__( 'Used in %s', 'aiplaz-link-checkup' ),
					placesPhrase( link.uses_count )
				) }
			</span>
			<Button size="sm" onClick={ openPanel }>
				{ __( 'Fix', 'aiplaz-link-checkup' ) }
			</Button>
		</div>
	);
}