<script lang="ts">
	import * as Select from '$lib/components/ui/select';
	import { Shield, ShieldOff, ShieldAlert, ShieldX } from 'lucide-svelte';

	export type VulnerabilityCriteria = 'never' | 'any' | 'critical_high' | 'critical' | 'more_than_current';

	interface Props {
		value: VulnerabilityCriteria;
		onchange?: (value: VulnerabilityCriteria) => void;
		class?: string;
	}

	let {
		value = $bindable(),
		onchange,
		class: className = ''
	}: Props = $props();
</script>

<Select.Root
	type="single"
	bind:value={value}
	onValueChange={(v) => {
		if (v) {
			value = v as VulnerabilityCriteria;
			onchange?.(value);
		}
	}}
>
	<Select.Trigger class="w-full h-9 {className}">
		<span class="flex items-center gap-2">
			{#if value === 'never'}
				<ShieldOff class="w-3.5 h-3.5 text-muted-foreground" />
				<span>Never block</span>
			{:else if value === 'any'}
				<ShieldAlert class="w-3.5 h-3.5 text-amber-500" />
				<span>Any vulnerabilities</span>
			{:else if value === 'critical_high'}
				<ShieldX class="w-3.5 h-3.5 text-orange-500" />
				<span>Critical or high</span>
			{:else if value === 'critical'}
				<ShieldX class="w-3.5 h-3.5 text-red-500" />
				<span>Critical only</span>
			{:else if value === 'more_than_current'}
				<Shield class="w-3.5 h-3.5 text-blue-500" />
				<span>More than current image</span>
			{:else}
				<ShieldOff class="w-3.5 h-3.5 text-muted-foreground" />
				<span>Never block</span>
			{/if}
		</span>
	</Select.Trigger>
	<Select.Content>
		<Select.Item value="never">
			<div class="flex items-center gap-2">
				<ShieldOff class="w-3.5 h-3.5 text-muted-foreground" />
				<span>Never block</span>
			</div>
		</Select.Item>
		<Select.Item value="any">
			<div class="flex items-center gap-2">
				<ShieldAlert class="w-3.5 h-3.5 text-amber-500" />
				<span>Any vulnerabilities</span>
			</div>
		</Select.Item>
		<Select.Item value="critical_high">
			<div class="flex items-center gap-2">
				<ShieldX class="w-3.5 h-3.5 text-orange-500" />
				<span>Critical or high</span>
			</div>
		</Select.Item>
		<Select.Item value="critical">
			<div class="flex items-center gap-2">
				<ShieldX class="w-3.5 h-3.5 text-red-500" />
				<span>Critical only</span>
			</div>
		</Select.Item>
		<Select.Item value="more_than_current">
			<div class="flex items-center gap-2">
				<Shield class="w-3.5 h-3.5 text-blue-500" />
				<span>More than current image</span>
			</div>
		</Select.Item>
	</Select.Content>
</Select.Root>
