Scrum4Me/app/_components/tasks/status-select.tsx

'use client'

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

const STATUS_CONFIG: Record<TaskStatus, { label: string; dot: string }> = {
  TO_DO: { label: 'To Do', dot: 'bg-muted-foreground' },
  IN_PROGRESS: { label: 'Bezig', dot: 'bg-status-in-progress' },
  REVIEW: { label: 'Review', dot: 'bg-status-review' },
  DONE: { label: 'Klaar', dot: 'bg-status-done' },
}

const STATUS_ORDER: TaskStatus[] = ['TO_DO', 'IN_PROGRESS', 'REVIEW', 'DONE']

function StatusIndicator({ status }: { status: TaskStatus }) {
  return (
    <span className="flex items-center gap-2">
      <span className={cn('size-2.5 rounded-full shrink-0', STATUS_CONFIG[status].dot)} />
      {STATUS_CONFIG[status].label}
    </span>
  )
}

interface StatusSelectProps {
  value?: TaskStatus
  onChange: (value: TaskStatus) => void
  disabled?: boolean
}

export function StatusSelect({ value = 'TO_DO', onChange, disabled }: StatusSelectProps) {
  return (
    <Select
      value={value}
      onValueChange={(v) => onChange(v as TaskStatus)}
      disabled={disabled}
    >
      <SelectTrigger className="w-48">
        <StatusIndicator status={value} />
      </SelectTrigger>
      <SelectContent>
        {STATUS_ORDER.map(status => (
          <SelectItem key={status} value={status}>
            <StatusIndicator status={status} />
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}