<script lang="ts">
	import type { SvelteHTMLElements } from 'svelte/elements';

	const sizes = [256, 64, 32, 16] as const;

	interface Props {
		chara_id: number | null | undefined;
		size: (typeof sizes)[number];
	}

	let { chara_id, size, ...rest }: Props & SvelteHTMLElements['picture'] = $props();

	const icon = $derived(chara_id ?? 0);
	const avifs = $derived(
		sizes
			.filter((sz) => sz >= size)
			.map((sz) => `/img/chara/${icon}/${sz}x${sz}.avif ${sz / size}x`)
			.join(', '),
	);
	const pngs = $derived(
		sizes
			.filter((sz) => sz >= size)
			.map((sz) => `/img/chara/${icon}/${sz}x${sz}.png ${sz / size}x`)
			.join(', '),
	);
	const src = $derived(icon !== 0 ? `/img/chara/${icon}/${sizes[0]}x${sizes[0]}.png` : `/img/skill/10011`);
</script>

{#if icon !== 0}
	<picture {...rest}>
		<source srcset={avifs} type="image/avif" />
		<source srcset={pngs} type="image/png" />
		<img {src} alt={`Icon for character ID ${chara_id}`} class="inline" width={size} height={size} loading="lazy" />
	</picture>
{:else}
	<div class={`w-[${size}px] h-[${size}px]`}></div>
{/if}
