<script lang="ts">
	import Artist from '$lib/icons/Artist.svelte';
	import Character from '$lib/icons/Character.svelte';
	import Circle from '$lib/icons/Circle.svelte';
	import World from '$lib/icons/World.svelte';
	import type { Component } from 'svelte';
	import Pill from './Pill.svelte';

	type Association = 'artist' | 'circle' | 'world' | 'character';

	let { name, type }: { name: string; type: Association } = $props();

	const icons: Record<Association, Component> = {
		artist: Artist,
		character: Character,
		circle: Circle,
		world: World
	};

	const Icon = icons[type];
</script>

<Pill {name}>
	{#snippet icon()}
		<Icon />
	{/snippet}
</Pill>