<script lang="ts">
	/**
	 * CountryFlag component - displays a country flag using SVG images
	 * Uses ISO 3166-1 alpha-2 country codes (e.g., 'US', 'FR', 'MC')
	 */

	interface Props {
		/** ISO 3166-1 alpha-2 country code (e.g., 'US', 'FR', 'MC') */
		code: string;
		/** Size of the flag: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
		/** Use square (1:1) aspect ratio instead of standard (4:3) */
		square?: boolean;
		/** Additional CSS classes */
		class?: string;
	}

	let { code, size = 'md', square = false, class: className = '' }: Props = $props();

	// Size mappings in pixels for cleaner rendering
	const sizes = {
		xs: { width: 16, height: 12 },
		sm: { width: 20, height: 15 },
		md: { width: 24, height: 18 },
		lg: { width: 32, height: 24 },
		xl: { width: 40, height: 30 }
	};

	const currentSize = $derived(sizes[size]);
	const flagSrc = $derived(`/flags/${code.toLowerCase()}.svg`);
</script>

<img
	src={flagSrc}
	alt="{code} flag"
	width={currentSize.width}
	height={square ? currentSize.width : currentSize.height}
	class="inline-block object-cover {square ? 'rounded-sm' : ''} {className}"
	style="vertical-align: middle;"
/>
