'use client'

import { useMemo } from 'react'
import { Language } from '@/lib/compliance-i18n'
import { Risk, RISK_BADGE_COLORS } from './risk-heatmap-types'

interface RiskDistributionProps {
  risks: Risk[]
  lang?: Language
}

export function RiskDistribution({ risks, lang = 'de' }: RiskDistributionProps) {
  const stats = useMemo(() => {
    const byLevel: Record<string, number> = { critical: 0, high: 0, medium: 0, low: 0 }
    risks.forEach((r) => {
      byLevel[r.inherent_risk] = (byLevel[r.inherent_risk] || 0) + 1
    })
    return byLevel
  }, [risks])

  const total = risks.length || 1

  return (
    <div className="space-y-2">
      {['critical', 'high', 'medium', 'low'].map((level) => {
        const count = stats[level]
        const percentage = (count / total) * 100

        return (
          <div key={level} className="flex items-center gap-2">
            <span className="text-xs text-slate-500 w-16 capitalize">{level}</span>
            <div className="flex-1 h-4 bg-slate-100 rounded overflow-hidden">
              <div
                className={`h-full ${RISK_BADGE_COLORS[level]} transition-all`}
                style={{ width: `${percentage}%` }}
              />
            </div>
            <span className="text-xs font-medium text-slate-700 w-8 text-right">{count}</span>
          </div>
        )
      })}
    </div>
  )
}