'use client'

import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
import { cn } from '@/lib/utils'
import type { PbiStatusApi } from '@/lib/task-status'

export const PBI_STATUS_LABELS: Record<PbiStatusApi, string> = {
  ready: 'Klaar voor sprint',
  blocked: 'Geblokkeerd',
  done: 'Afgerond',
}

export const PBI_STATUS_COLORS: Record<PbiStatusApi, string> = {
  ready: 'bg-status-todo/15 text-status-todo border-status-todo/30',
  blocked: 'bg-status-blocked/15 text-status-blocked border-status-blocked/30',
  done: 'bg-status-done/15 text-status-done border-status-done/30',
}

interface PbiStatusSelectProps {
  value: PbiStatusApi
  onChange: (value: PbiStatusApi) => void
  className?: string
}

export function PbiStatusSelect({ value, onChange, className }: PbiStatusSelectProps) {
  return (
    <Select
      value={value}
      onValueChange={(v) => { if (v) onChange(v as PbiStatusApi) }}
    >
      <SelectTrigger className={cn('w-full', className)}>
        {PBI_STATUS_LABELS[value] ?? value}
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="ready">Klaar voor sprint</SelectItem>
        <SelectItem value="blocked">Geblokkeerd</SelectItem>
        <SelectItem value="done">Afgerond</SelectItem>
      </SelectContent>
    </Select>
  )
}