/**
 * Country flag glyph for the Locations card and the visitor rows.
 *
 * The SVG is a static file under assets/flags/ (country-flag-icons, 3:2, MIT),
 * never a bundled component: importing the whole set to pick five at runtime
 * once made the bundle heavier than the entire admin app (Phase 20).
 */
import { useState } from 'react';
import { config } from './api';
import { useUi } from './ui-context';

export default function FlagIcon( { code, size = 20 } ) {
	const { icons } = useUi();
	// Remembers WHICH code failed, so a reused row instance still draws the
	// next country's flag. Codes with no file are real: a site behind no CDN
	// reports nothing, and Cloudflare sends XX (unknown) and T1 (Tor).
	const [ failed, setFailed ] = useState( null );
	const cc = ( code || '' ).toUpperCase();

	if ( ! cc || failed === cc ) {
		return (
			<span aria-hidden="true" className="sa-flag" style={ { width: size } }>
				<icons.Globe size={ Math.round( size * 0.8 ) } />
			</span>
		);
	}

	return (
		<img
			src={ config.flagsUrl + cc + '.svg' }
			alt=""
			aria-hidden="true"
			onError={ () => setFailed( cc ) }
			className="sa-flag-img"
			style={ { width: size } }
		/>
	);
}