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

let { originalFilename }: { originalFilename: 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.doc_section_file()}
	</h2>

	<div class="mb-4 flex items-center gap-3 rounded bg-muted px-3 py-2 text-sm text-ink-2">
		<img
			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
			alt=""
			aria-hidden="true"
			class="h-4 w-4 flex-shrink-0"
		/>
		<span
			>{m.doc_current_file_label()}
			<strong class="font-medium text-ink">{originalFilename}</strong></span
		>
	</div>

	<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
		{m.doc_file_replace_label()}
		<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
	</label>
	<input
		id="file-upload"
		type="file"
		name="file"
		class="block w-full cursor-pointer text-sm
               text-ink-2 file:mr-4 file:rounded
               file:border-0 file:bg-muted
               file:px-4 file:py-2
               file:text-sm file:font-semibold
               file:text-ink hover:file:bg-muted"
	/>
</div>
