<script lang="ts">
	import { Badge } from '$lib/components/ui/badge';
	import type { VulnerabilityCriteria } from '$lib/server/db';
	import {
		vulnerabilityCriteriaLabels,
		vulnerabilityCriteriaIcons,
		getCriteriaBadgeClass
	} from '$lib/utils/update-steps';

	interface Props {
		criteria: VulnerabilityCriteria;
		showLabel?: boolean;
	}

	let { criteria, showLabel = true }: Props = $props();

	const iconConfig = $derived(vulnerabilityCriteriaIcons[criteria] || vulnerabilityCriteriaIcons.never);
	const label = $derived(vulnerabilityCriteriaLabels[criteria] || criteria);
	const badgeClass = $derived(getCriteriaBadgeClass(criteria));
</script>

<Badge variant="outline" class="text-xs {badgeClass}">
	<svelte:component this={iconConfig.component} class={iconConfig.class} />
	{#if showLabel}
		<span class="ml-1">{label}</span>
	{/if}
</Badge>
