'use client'

import { AISystem } from './types'

interface RiskPyramidProps {
  systems: AISystem[]
}

export function RiskPyramid({ systems }: RiskPyramidProps) {
  const counts = {
    prohibited: systems.filter(s => s.classification === 'prohibited').length,
    'high-risk': systems.filter(s => s.classification === 'high-risk').length,
    'limited-risk': systems.filter(s => s.classification === 'limited-risk').length,
    'minimal-risk': systems.filter(s => s.classification === 'minimal-risk').length,
  }

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">AI Act Risikopyramide</h3>
      <div className="flex flex-col items-center space-y-1">
        <div className="w-24 h-12 bg-red-500 text-white flex items-center justify-center rounded-t-lg text-sm font-medium">
          Verboten ({counts.prohibited})
        </div>
        <div className="w-40 h-12 bg-orange-500 text-white flex items-center justify-center text-sm font-medium">
          Hochrisiko ({counts['high-risk']})
        </div>
        <div className="w-56 h-12 bg-yellow-500 text-white flex items-center justify-center text-sm font-medium">
          Begrenztes Risiko ({counts['limited-risk']})
        </div>
        <div className="w-72 h-12 bg-green-500 text-white flex items-center justify-center rounded-b-lg text-sm font-medium">
          Minimales Risiko ({counts['minimal-risk']})
        </div>
      </div>
      <div className="mt-4 text-center text-sm text-gray-500">
        {systems.filter(s => s.classification === 'unclassified').length} System(e) noch nicht klassifiziert
      </div>
    </div>
  )
}