Priority select with colored badges

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Field } from "@/components/ui/field"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const priorities = [
  { value: "none", label: "No Priority", variant: "outline" as const },
  { value: "urgent", label: "Urgent", variant: "destructive" as const },
  { value: "high", label: "High", variant: "warning" as const },
  { value: "medium", label: "Medium", variant: "warning-light" as const },
  { value: "low", label: "Low", variant: "info" as const },
]

function findPriority(value: unknown) {
  return priorities.find((priority) => priority.value === value)
}
</script>

<template>
  <Field class="max-w-xs">
    <Select :default-value="priorities[0]!.value">
      <SelectTrigger class="w-[200px]">
        <!--
          reka-ui's SelectValue отдаёт только textContent выбранного
          SelectItem, тогда как Radix's Select.Value заново монтирует
          children целиком (см. комментарий в c-select-6.vue).
        -->
        <SelectValue placeholder="Select priority">
          <template #default="{ modelValue }">
            <span v-if="findPriority(modelValue)" class="flex items-center gap-2">
              <Badge :variant="findPriority(modelValue)!.variant" size="sm">
                {{ findPriority(modelValue)!.label }}
              </Badge>
            </span>
          </template>
        </SelectValue>
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectGroup>
          <SelectItem v-for="priority in priorities" :key="priority.value" :value="priority.value">
            <span class="flex items-center gap-2">
              <Badge :variant="priority.variant" size="sm">
                {{ priority.label }}
              </Badge>
            </span>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</template>