'use client'

import { Weights } from '../_hooks/useCRA'

const OBJECTIVES: { id: string; label: string }[] = [
  { id: 'access', label: 'Zugang / Authentifizierung' },
  { id: 'data', label: 'Datenvertraulichkeit' },
  { id: 'network_api', label: 'Netzwerk / API' },
  { id: 'supply_updates', label: 'Updates / Supply-Chain' },
  { id: 'monitoring', label: 'Monitoring / Incident' },
]

export function WeightsControl({ weights, onChange }: { weights: Weights; onChange: (w: Weights) => void }) {
  const set = (id: string, v: string) => onChange({ ...weights, [id]: v })
  return (
    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
      <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Ihre Prioritäten</h2>
      <p className="text-[11px] text-gray-400 mb-3">
        Gewichten Sie, was für Sie zuerst zählt. Kritische, aktiv ausnutzbare und personengefährdende
        Befunde bleiben unabhängig davon ganz oben (P0). Grobe Vorsortierung — Feinordnung im Ticketsystem.
      </p>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {OBJECTIVES.map((o) => (
          <label key={o.id} className="flex items-center justify-between gap-2 text-xs">
            <span className="text-gray-600 dark:text-gray-300">{o.label}</span>
            <select
              value={weights[o.id] || 'medium'}
              onChange={(e) => set(o.id, e.target.value)}
              className="rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-2 py-1"
            >
              <option value="high">Hoch</option>
              <option value="medium">Mittel</option>
              <option value="low">Niedrig</option>
            </select>
          </label>
        ))}
      </div>
    </div>
  )
}
