import { CheckCircle2, Lock } from 'lucide-react'

const USAGE_CONFIG: Record<string, { bg: string; label: string }> = {
  allowed: { bg: 'bg-green-100 text-green-800', label: 'Erlaubt' },
  restricted: { bg: 'bg-yellow-100 text-yellow-800', label: 'Eingeschraenkt' },
  prohibited: { bg: 'bg-red-100 text-red-800', label: 'Verboten' },
  unclear: { bg: 'bg-gray-100 text-gray-600', label: 'Unklar' },
  yes: { bg: 'bg-green-100 text-green-800', label: 'Ja' },
  no: { bg: 'bg-red-100 text-red-800', label: 'Nein' },
  'n/a': { bg: 'bg-gray-100 text-gray-400', label: 'k.A.' },
}

export function UsageBadge({ value }: { value: string }) {
  const c = USAGE_CONFIG[value] || USAGE_CONFIG.unclear
  return <span className={`inline-flex px-1.5 py-0.5 rounded text-xs font-medium ${c.bg}`}>{c.label}</span>
}

export function PermBadge({ label, allowed }: { label: string; allowed: boolean }) {
  return (
    <div className="flex items-center gap-1">
      {allowed ? <CheckCircle2 className="w-3 h-3 text-green-500" /> : <Lock className="w-3 h-3 text-red-400" />}
      <span className={`text-xs ${allowed ? 'text-green-700' : 'text-red-500'}`}>{label}</span>
    </div>
  )
}