<script lang="ts">
	/** Cotation de pertinence guadeloupéenne, avec son motif quand il existe. */
	interface Props {
		pertinence: string | null;
		note?: string | null;
		aVerifier?: boolean;
	}

	const { pertinence, note = null, aVerifier = false }: Props = $props();

	const LIBELLES: Record<string, string> = {
		forte: 'Gwadloup : forte',
		moyenne: 'Gwadloup : moyenne',
		faible: 'Gwadloup : faible'
	};
	const OPACITES: Record<string, string> = { forte: '100%', moyenne: '70%', faible: '45%' };
</script>

{#if pertinence}
	<span
		class="badge"
		style="--intensite: {OPACITES[pertinence] ?? '50%'}"
		title={note ?? undefined}
	>
		{LIBELLES[pertinence] ?? pertinence}{#if aVerifier}<abbr title="Cotation déduite automatiquement, non relue">*</abbr>{/if}
	</span>
{/if}

<style>
	.badge {
		display: inline-flex;
		align-items: center;
		font-size: 0.76rem;
		font-weight: 600;
		padding: 0.16em 0.6em;
		border-radius: var(--radius-sm);
		border: 1px solid color-mix(in srgb, var(--turquoise-caraibes) var(--intensite), transparent);
		background: color-mix(in srgb, var(--turquoise-caraibes) 12%, transparent);
		color: var(--blanc-creme);
		white-space: nowrap;
	}
	abbr {
		text-decoration: none;
		color: var(--or-oki);
		margin-left: 0.15em;
		cursor: help;
	}
</style>
