const RESPONSE_LEVELS = [
  { value: 'KEY USER', label: 'Key User' },
  { value: 'Helpdesk', label: '1st Level' },
  { value: 'Support', label: '2nd Level' },
  { value: 'Admin', label: '3rd Level' },
  { value: 'FS/FE', label: 'FS/FE' },
  { value: '24/7', label: '24/7' },
  { value: 'TECH MGMT', label: 'Tech Mgmt' },
  { value: 'Backoffice', label: 'Backoffice' },
  { value: 'BUSI MGMT', label: 'Busi Mgmt' }
]

export default function ResponseDropdown({ value, onChange }) {
  return (
    <div className="dropdown">
      <button className="btn" style={{ background: 'inherit', color: 'inherit' }}>
        {value?.toUpperCase() || 'BACKOFFICE'}
      </button>
      <div className="dropdown-content">
        {RESPONSE_LEVELS.map(level => (
          <span 
            key={level.value}
            className="dropdown-item"
            onClick={() => onChange(level.value)}
          >
            {level.label}
          </span>
        ))}
      </div>
    </div>
  )
}
