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

let {
	fileCount,
	chunkProgress,
	onSave,
	onDiscard
}: {
	fileCount: number;
	chunkProgress?: { done: number; total: number };
	onSave: () => void;
	onDiscard: () => void;
} = $props();
</script>

<div class="shrink-0 border-t border-line bg-surface px-4 py-3">
	{#if chunkProgress}
		<progress
			value={chunkProgress.done}
			max={chunkProgress.total}
			aria-valuenow={chunkProgress.done}
			aria-valuemin={0}
			aria-valuemax={chunkProgress.total}
			aria-label={m.bulk_upload_progress({ done: chunkProgress.done, total: chunkProgress.total })}
			class="[&::-webkit-progress-bar]:bg-brand-sand mb-3 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-accent"
		></progress>
	{/if}
	<div class="flex items-center justify-between gap-3">
		<button type="button" onclick={onDiscard} class="text-sm text-red-600/70 hover:text-red-700">
			{m.bulk_discard_all()}
		</button>
		<button
			type="button"
			data-testid="bulk-save-btn"
			disabled={fileCount === 0}
			onclick={onSave}
			class="min-h-[44px] rounded-sm bg-primary px-6 text-sm font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90 disabled:opacity-40"
		>
			{fileCount === 1 ? m.bulk_save_cta_one() : m.bulk_save_cta({ count: fileCount })}
		</button>
	</div>
</div>
