<script lang="ts">
	export let tops: { name: string; value: string }[];
	export let rank: { rank: number; name: string; value: string } | null = null;
	$: tops = [...tops, ...new Array(3).fill(null)].slice(0, 3);
</script>

<div class="classement">
	{#each tops as t, i}
		{#if t != null}
            <p class={`top-${i+1}`}><strong>#{i + 1} - {t.name}</strong> - <span>{t.value}</span></p>
		{:else}
			<p class={`top-${i+1}`}><strong >#{i + 1}{" - "}</strong></p>
		{/if}

	{/each}

	{#if rank != null && rank.rank > 3}
		<p class="top-x"><span>#{rank.rank} - {rank.name}</span> - <span>{rank.value}</span></p>
	{/if}
</div>

<style lang="scss">
	.classement {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

    .top-1 {
		color: gold;
	}
	.top-2 {
		color: silver;
	}
	.top-3 {
		color: brown;
	}
    .top-x{
        margin-top: 10px;
    }
</style>
