Scrum4Me/app/_components/tasks/priority-segmented.tsx

'use client'

import { cn } from '@/lib/utils'

const PRIORITIES = [
  {
    value: 1,
    label: 'P1 Critical',
    selected: 'bg-error-container text-on-error-container border-transparent',
  },
  {
    value: 2,
    label: 'P2 High',
    selected: 'bg-priority-high/15 text-priority-high border-priority-high/30',
  },
  {
    value: 3,
    label: 'P3 Medium',
    selected: 'bg-primary text-primary-foreground border-transparent',
  },
  {
    value: 4,
    label: 'P4 Low',
    selected: 'bg-muted text-foreground border-border',
  },
]

interface PrioritySegmentedProps {
  value: number
  onChange: (value: number) => void
  disabled?: boolean
}

export function PrioritySegmented({ value, onChange, disabled }: PrioritySegmentedProps) {
  return (
    <div className="flex gap-1 flex-wrap" role="group" aria-label="Prioriteit">
      {PRIORITIES.map(p => (
        <button
          key={p.value}
          type="button"
          onClick={() => !disabled && onChange(p.value)}
          aria-pressed={value === p.value}
          disabled={disabled}
          className={cn(
            'rounded-lg border px-3 py-1.5 text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
            value === p.value
              ? cn('font-medium', p.selected)
              : 'border-border text-muted-foreground hover:bg-muted hover:text-foreground',
          )}
        >
          {p.label}
        </button>
      ))}
    </div>
  )
}