'use client'

import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
import { cn } from '@/lib/utils'

export const PRIORITY_LABELS: Record<number, string> = {
  1: 'Kritiek',
  2: 'Hoog',
  3: 'Gemiddeld',
  4: 'Laag',
}

export const PRIORITY_COLORS: Record<number, string> = {
  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
}

interface PrioritySelectProps {
  value: number
  onChange: (value: number) => void
  className?: string
}

export function PrioritySelect({ value, onChange, className }: PrioritySelectProps) {
  return (
    <Select
      value={String(value)}
      onValueChange={(v) => { if (v) onChange(parseInt(v)) }}
    >
      <SelectTrigger className={cn('w-full', className)}>
        {PRIORITY_LABELS[value] ?? String(value)}
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="1">Kritiek</SelectItem>
        <SelectItem value="2">Hoog</SelectItem>
        <SelectItem value="3">Gemiddeld</SelectItem>
        <SelectItem value="4">Laag</SelectItem>
      </SelectContent>
    </Select>
  )
}