1<script lang="ts">
 2	import { RemoveButton } from '$lib/components/app';
 3
 4	interface Props {
 5		id: string;
 6		name: string;
 7		preview: string;
 8		readonly?: boolean;
 9		onRemove?: (id: string) => void;
10		onClick?: (event?: MouseEvent) => void;
11		class?: string;
12		// Customizable size props
13		width?: string;
14		height?: string;
15		imageClass?: string;
16	}
17
18	let {
19		id,
20		name,
21		preview,
22		readonly = false,
23		onRemove,
24		onClick,
25		class: className = '',
26		// Default to small size for form previews
27		width = 'w-auto',
28		height = 'h-16',
29		imageClass = ''
30	}: Props = $props();
31</script>
32
33<div
34	class="group relative overflow-hidden rounded-lg bg-muted shadow-lg dark:border dark:border-muted {className}"
35>
36	{#if onClick}
37		<button
38			type="button"
39			class="block h-full w-full rounded-lg focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
40			onclick={onClick}
41			aria-label="Preview {name}"
42		>
43			<img
44				src={preview}
45				alt={name}
46				class="{height} {width} cursor-pointer object-cover {imageClass}"
47			/>
48		</button>
49	{:else}
50		<img
51			src={preview}
52			alt={name}
53			class="{height} {width} cursor-pointer object-cover {imageClass}"
54		/>
55	{/if}
56
57	{#if !readonly}
58		<div
59			class="absolute top-1 right-1 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
60		>
61			<RemoveButton {id} {onRemove} class="text-white" />
62		</div>
63	{/if}
64</div>