<script lang="ts">
	import type { Id } from '$lib/convex/_generated/dataModel';

	interface Photo {
		_id: Id<'photoDrafts'>;
		mediaType: string;
	}

	interface Props {
		photos: Photo[];
		onremove: (index: number) => void;
	}

	let { photos, onremove }: Props = $props();
</script>

{#if photos.length > 0}
	<div class="flex flex-wrap gap-1">
		{#each photos as _photo, i (i)}
			<button
				onclick={() => onremove(i)}
				class="flex items-center gap-1 rounded bg-blue-600/30 px-1.5 py-0.5 text-[8px] text-blue-300"
			>
				<span>photo {i + 1}</span>
				<span class="text-blue-400">&times;</span>
			</button>
		{/each}
	</div>
{/if}
