<script lang="ts">
	import type { CCN } from '$lib/eve';

	let {
		ccn,
		activeCCN
	}: {
		ccn: CCN;
		activeCCN: CCN | null;
	} = $props();

	function switchCCN() {
		window.eve.activateCCN(ccn.publicKey).then(() => {
			window.location.reload();
		});
	}
</script>

<li>
	<button
		type="button"
		class="ccn-btn"
		class:is-active={ccn.publicKey === activeCCN?.publicKey}
		aria-pressed={ccn.publicKey === activeCCN?.publicKey}
		aria-label={ccn.name}
		title={ccn.name}
		onclick={switchCCN}
	>
		<div class="ccn-inner">
			<div class="ccn-avatar">
				<div class="ccn-hex">
					<img
						src={window.eve.getCCNAvatar(ccn.publicKey)}
						alt={'Avatar for ' + ccn.name}
						class="ccn-img"
						loading="lazy"
						decoding="async"
					/>
				</div>

				{#if ccn.publicKey === activeCCN?.publicKey}
					<span class="ccn-indicator"></span>
				{/if}
			</div>

			<span class="ccn-name">
				{ccn.name}
			</span>
		</div>
	</button>
</li>
