<script lang="ts">
	/**
	 * Badge de statut.
	 *
	 * L'accessibilité daltonienne interdit de faire porter l'information par la
	 * seule couleur : chaque statut porte donc son libellé en toutes lettres et
	 * un motif de bordure distinct. La couleur ne fait que renforcer.
	 */
	import { LIBELLES_STATUT } from '$lib/libelles';

	interface Props {
		statut: string;
		devantCc?: boolean;
		compact?: boolean;
	}

	const { statut, devantCc = false, compact = false }: Props = $props();

	const COULEURS: Record<string, string> = {
		promulguee: 'var(--statut-promulguee)',
		validee_cc: 'var(--statut-attente)',
		adoptee_non_promulguee: 'var(--statut-attente)',
		saisie_cc: 'var(--statut-cc)',
		censuree_partiellement: 'var(--statut-cc)',
		navette: 'var(--statut-navette)',
		deposee_non_examinee: 'var(--statut-projet)',
		annoncee: 'var(--statut-projet)',
		rejetee: 'var(--statut-rejetee)'
	};

	const couleur = $derived(COULEURS[statut] ?? 'var(--muted-fort)');
	const libelle = $derived(LIBELLES_STATUT[statut] ?? statut);
</script>

<span class="badge" class:compact style="--teinte: {couleur}">
	<span class="pastille" aria-hidden="true"></span>
	{libelle}
</span>
{#if devantCc && statut !== 'saisie_cc'}
	<span class="badge cc" style="--teinte: var(--statut-cc)">
		<span class="pastille" aria-hidden="true"></span>
		Devant le Conseil constitutionnel
	</span>
{/if}

<style>
	.badge {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		font-size: 0.76rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		padding: 0.16em 0.6em;
		border-radius: var(--radius-sm);
		border: 1px solid color-mix(in srgb, var(--teinte) 65%, transparent);
		background: color-mix(in srgb, var(--teinte) 12%, transparent);
		color: var(--blanc-creme);
		white-space: nowrap;
	}
	.badge.compact {
		font-size: 0.72rem;
	}
	.pastille {
		width: 0.5em;
		height: 0.5em;
		background: var(--teinte);
		border-radius: 1px;
		flex: none;
	}
</style>
