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

export function OpenLinkSection( { url }: { url: string } ): JSX.Element {
	const autofocus = useAutofocus< HTMLAnchorElement >();

	return (
		<div className="sec">
			<a
				{ ...autofocus }
				className="btn btn-ghost"
				href={ url }
				target="_blank"
				rel="noopener noreferrer"
			>
				<Icon name="external" />
				{ __( 'Open the link in a new tab', 'aiplaz-link-checkup' ) }
			</a>
		</div>
	);
}