<script lang="ts">
	import WikiFiche from './WikiFiche.svelte';
	import { t } from '$lib/i18n/store.svelte';
	import type { GuessResult } from '$lib/types';

	interface Props {
		result: GuessResult;
		labelBouton?: string;
		creditPhoto?: string;
		onsuivant?: () => void;
	}

	let { result, labelBouton, creditPhoto, onsuivant }: Props = $props();
</script>

<section class="resultat" aria-live="polite">
	<header class="score-bloc">
		<p class="bravo">{result.score > 0 ? t().micro.bravo : t().micro.kiteSaYe}</p>
		<p class="score">
			<span class="valeur">{result.score}</span>
			<span class="unite">{t().resultat.points}</span>
		</p>
		{#if result.distanceKm !== null}
			<p class="distance">{t().resultat.distance} : {result.distanceKm} {t().resultat.km}</p>
		{/if}
		<p class="lieu">
			<strong>{result.nom}</strong>
			{#if result.nom_creole && result.nom_creole !== result.nom}
				<span class="creole"> · {result.nom_creole}</span>
			{/if}
			<br />
			{t().resultat.commune} : {result.commune} — {t().regions[result.region]}
		</p>
	</header>

	{#key result.nom}
		<WikiFiche
			nom={result.nom}
			wikidataId={result.wikidata_id}
			tonPositif={result.score > 0 ? t().resultat.trouve : t().resultat.aDecouvrir}
		/>
	{/key}

	{#if creditPhoto}
		<p class="credit-photo">{creditPhoto}</p>
	{/if}

	{#if onsuivant}
		<button type="button" class="btn btn-primaire suivant" onclick={onsuivant}>
			{labelBouton ?? t().resultat.suivant}
		</button>
	{/if}
</section>

<style>
	.resultat {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.score-bloc {
		text-align: center;
	}

	.bravo {
		margin: 0;
		font-size: 1.3rem;
		font-weight: 700;
		color: var(--oki-vert-clair);
	}

	.score {
		margin: 0.2rem 0;
	}

	.score .valeur {
		font-size: 2.6rem;
		font-weight: 800;
		color: var(--oki-vert);
	}

	.score .unite {
		font-size: 1rem;
		color: var(--oki-encre-doux);
		margin-left: 0.3rem;
	}

	.distance {
		margin: 0;
		color: var(--oki-encre-doux);
	}

	.credit-photo {
		margin: 0;
		font-size: 0.72rem;
		color: var(--oki-encre-doux);
		text-align: center;
	}

	.lieu {
		margin: 0.5rem 0 0;
	}

	.creole {
		color: var(--oki-vert-clair);
		font-style: italic;
	}

	.suivant {
		align-self: center;
		min-width: 220px;
	}
</style>
