import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Suggestion } from '../../shared/api/types/links';
import { linkName } from '../../shared/links/linkName';
import { Icon } from '../../shared/ui/Icon';
import { suggestionIcon, suggestionLabel } from './suggestionLooks';

type SuggestionsProps = {
	suggestions: readonly Suggestion[];
	onChoose: ( suggestion: Suggestion ) => void;
};

export function Suggestions( {
	suggestions,
	onChoose,
}: SuggestionsProps ): JSX.Element {
	return (
		<div className="sugg">
			<span className="label">
				{ __( 'Suggestions', 'aiplaz-link-checkup' ) }
			</span>
			{ suggestions.map( ( suggestion ) => (
				<button
					key={ suggestion.kind }
					type="button"
					onClick={ () => {
						onChoose( suggestion );
					} }
				>
					<Icon name={ suggestionIcon( suggestion.kind ) } />
					<b>{ suggestionLabel( suggestion.kind ) }</b>
					<span>{ linkName( suggestion.url ) }</span>
				</button>
			) ) }
		</div>
	);
}