<script lang="ts">
	/**
	 * CS:GO Skill Group Rank Icon Component
	 * Displays the appropriate rank icon based on skill group (0-18)
	 */
	interface Props {
		/** CS:GO skill group (0-18) */
		skillGroup: number | undefined | null;
		size?: 'sm' | 'md' | 'lg';
		showLabel?: boolean;
		class?: string;
	}

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

	// Map skill groups to rank names
	const rankNames: Record<number, string> = {
		0: 'Unranked',
		1: 'Silver I',
		2: 'Silver II',
		3: 'Silver III',
		4: 'Silver IV',
		5: 'Silver Elite',
		6: 'Silver Elite Master',
		7: 'Gold Nova I',
		8: 'Gold Nova II',
		9: 'Gold Nova III',
		10: 'Gold Nova Master',
		11: 'Master Guardian I',
		12: 'Master Guardian II',
		13: 'Master Guardian Elite',
		14: 'Distinguished Master Guardian',
		15: 'Legendary Eagle',
		16: 'Legendary Eagle Master',
		17: 'Supreme Master First Class',
		18: 'The Global Elite'
	};

	const sizeClasses = {
		sm: 'h-11 w-11 max-h-11',
		md: 'h-16 w-16',
		lg: 'h-20 w-20'
	};

	const labelSizeClasses = {
		sm: 'text-xs',
		md: 'text-sm',
		lg: 'text-base'
	};

	const iconPath = $derived(
		skillGroup !== undefined && skillGroup !== null && skillGroup >= 0 && skillGroup <= 18
			? `/images/rank_icons/skillgroup${skillGroup}.svg`
			: '/images/rank_icons/skillgroup_none.svg'
	);

	const rankName = $derived(
		skillGroup !== undefined && skillGroup !== null ? rankNames[skillGroup] || 'Unknown' : 'Unknown'
	);
</script>

{#if showLabel}
	<div class="inline-flex items-center gap-2 {className}">
		<img src={iconPath} alt={rankName} class="{sizeClasses[size]} object-contain" />
		<span class="font-medium {labelSizeClasses[size]}">{rankName}</span>
	</div>
{:else}
	<img
		src={iconPath}
		alt={rankName}
		title={rankName}
		class="{sizeClasses[size]} {className} inline-block object-contain align-middle"
	/>
{/if}
