<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

interface Props {
	note: string;
}

let { note }: Props = $props();
</script>

<div
	aria-label={m.journey_interlude_aria_label()}
	class="my-2 border-l-4 border-journey-border bg-journey-tint px-4 py-3"
>
	<p
		class="text-center font-sans text-xs tracking-widest text-journey uppercase"
		aria-hidden="true"
	>
		❦
	</p>
	<!-- plaintext — do NOT use {@html} here -->
	<p class="font-serif text-base leading-relaxed text-ink-2 italic">{note}</p>
</div>
