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

let { initialTranscription = '' }: { initialTranscription?: string } = $props();
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.form_label_transcription()}
	</h2>
	<textarea
		id="transcription"
		name="transcription"
		rows="12"
		placeholder={m.form_placeholder_transcription()}
		class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		>{initialTranscription}</textarea
	>
</div>
