<script lang="ts">
	import Pill from './Pill.svelte';

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

	export let name: string;
	export let type: Association;
</script>

<Pill {name}>
	<span class={`${type} icon-xs`} slot="icon" />
</Pill>

<style lang="postcss">
	.artist {
		@apply icon-[material-symbols--person] -mx-px;
	}

	.character {
		@apply icon-[material-symbols--face];
	}

	.circle {
		@apply icon-[material-symbols--group] mx-px;
	}

	.world {
		@apply icon-[material-symbols--public];
	}
</style>