const PRIORITIES = [
  { value: 0, label: 'None' },
  { value: 1, label: 'Low' },
  { value: 2, label: 'Medium' },
  { value: 3, label: 'High' },
  { value: 4, label: 'Critical' }
]

const PRIORITY_LABELS = {
  0: 'NONE',
  1: 'LOW',
  2: 'MEDIUM',
  3: 'HIGH',
  4: 'CRITICAL'
}

export default function PriorityDropdown({ value, onChange }) {
  return (
    <div className="dropdown">
      <button className="btn" style={{ background: 'inherit', color: 'inherit' }}>
        {PRIORITY_LABELS[value] || 'LOW'}
      </button>
      <div className="dropdown-content">
        {PRIORITIES.map(priority => (
          <span 
            key={priority.value}
            className="dropdown-item"
            onClick={() => onChange(priority.value)}
          >
            {priority.label}
          </span>
        ))}
      </div>
    </div>
  )
}
