1<script lang="ts">
 2	import { X } from '@lucide/svelte';
 3	import { Button } from '$lib/components/ui/button';
 4
 5	interface Props {
 6		id: string;
 7		onRemove?: (id: string) => void;
 8		class?: string;
 9	}
10
11	let { id, onRemove, class: className = '' }: Props = $props();
12</script>
13
14<Button
15	type="button"
16	variant="ghost"
17	size="sm"
18	class="h-6 w-6 bg-white/20 p-0 hover:bg-white/30 {className}"
19	onclick={(e) => {
20		e.stopPropagation();
21		onRemove?.(id);
22	}}
23	aria-label="Remove file"
24>
25	<X class="h-3 w-3" />
26</Button>