<script lang="ts">
	interface ThumbURLs {
		avif: string;
		webp: string;
		jpg: string;
	}

	interface FullURLs {
		avif: string;
		webp: string;
		jpg: string;
		jxl?: string;
	}

	const {
		urls,
		type = 'thumb',
		alt = '',
		class: className = '',
		...imgProps
	}: {
		urls: ThumbURLs | FullURLs;
		type?: 'thumb' | 'full';
		alt?: string;
		class?: string;
		[key: string]: unknown;
	} = $props();

	const fallbackSrc = $derived(urls.jpg || urls.webp || urls.avif || '');
	const hasJxl = $derived(type === 'full' && 'jxl' in urls && (urls as FullURLs).jxl);
</script>

<picture>
	{#if urls.avif}
		<source srcset={urls.avif} type="image/avif" />
	{/if}
	{#if urls.webp}
		<source srcset={urls.webp} type="image/webp" />
	{/if}
	{#if urls.jpg}
		<source srcset={urls.jpg} type="image/jpeg" />
	{/if}
	{#if hasJxl}
		<source srcset={(urls as FullURLs).jxl} type="image/jxl" />
	{/if}
	<img src={fallbackSrc} {alt} class={className} {...imgProps} />
</picture>
