1<script lang="ts">
 2	import { ModelModality } from '$lib/enums';
 3	import { MODALITY_ICONS, MODALITY_LABELS } from '$lib/constants/icons';
 4	import { cn } from '$lib/components/ui/utils';
 5
 6	type DisplayableModality = ModelModality.VISION | ModelModality.AUDIO;
 7
 8	interface Props {
 9		modalities: ModelModality[];
10		class?: string;
11	}
12
13	let { modalities, class: className = '' }: Props = $props();
14
15	// Filter to only modalities that have icons (VISION, AUDIO)
16	const displayableModalities = $derived(
17		modalities.filter(
18			(m): m is DisplayableModality => m === ModelModality.VISION || m === ModelModality.AUDIO
19		)
20	);
21</script>
22
23{#each displayableModalities as modality, index (index)}
24	{@const IconComponent = MODALITY_ICONS[modality]}
25	{@const label = MODALITY_LABELS[modality]}
26
27	<span
28		class={cn(
29			'inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium',
30			className
31		)}
32	>
33		{#if IconComponent}
34			<IconComponent class="h-3 w-3" />
35		{/if}
36
37		{label}
38	</span>
39{/each}