import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import { Icon } from '../../shared/ui/Icon';

type SkipHostsProps = {
	hosts: readonly string[];
	onRemove: ( host: string ) => void;
};

export function SkipHosts( { hosts, onRemove }: SkipHostsProps ): JSX.Element {
	return (
		<div className="form-row">
			<div className="txt">
				<span className="label">
					{ __( 'Never check these sites', 'aiplaz-link-checkup' ) }
				</span>
				<span>
					{ __(
						'Some sites block automatic checks. Links to them are skipped.',
						'aiplaz-link-checkup'
					) }
				</span>
			</div>
			<div className="tags">
				{ hosts.map( ( host ) => (
					<span className="tag" key={ host }>
						{ host }
						<button
							type="button"
							aria-label={ sprintf(
								/* translators: %s: name of a website, for example linkedin.com */
								__( 'Remove %s', 'aiplaz-link-checkup' ),
								host
							) }
							onClick={ () => {
								onRemove( host );
							} }
						>
							<Icon name="x" />
						</button>
					</span>
				) ) }
				{ hosts.length === 0 && (
					<span className="muted">
						{ __( 'None', 'aiplaz-link-checkup' ) }
					</span>
				) }
			</div>
		</div>
	);
}