<script lang="ts">
	// Titre de section avec ornement flag-chip + révélation cinétique (mot à mot).
	import KineticText from './KineticText.svelte';

	interface Props {
		title: string;
		as?: 'h2' | 'h3';
		id?: string;
		class?: string;
	}
	let { title, as = 'h2', id, class: cls = '' }: Props = $props();
</script>

<div class="section-title {cls}">
	<span class="flag-chip" aria-hidden="true"></span>
	<KineticText text={title} {as} {id} />
</div>

<style>
	.section-title {
		margin-bottom: var(--space-3);
	}
	.section-title .flag-chip {
		margin-bottom: 0.7rem;
	}
	.section-title :global(h2),
	.section-title :global(h3) {
		margin: 0;
	}
</style>
