import type { SbomStats } from '../types'

interface StatsCardsProps {
  stats: SbomStats
}

export function StatsCards({ stats }: StatsCardsProps) {
  const items = [
    { value: stats.totalAll, label: 'Komponenten Total', color: 'text-slate-800' },
    { value: stats.totalInfra, label: 'Docker Services', color: 'text-purple-600' },
    { value: stats.totalSecurityTools, label: 'Security Tools', color: 'text-red-600' },
    { value: stats.totalPython, label: 'Python', color: 'text-emerald-600' },
    { value: stats.totalGo, label: 'Go', color: 'text-sky-600' },
    { value: stats.totalNode, label: 'Node.js', color: 'text-lime-600' },
    { value: stats.totalUnity, label: 'Unity', color: 'text-amber-600' },
    { value: stats.totalCsharp, label: 'C#', color: 'text-fuchsia-600' },
    { value: stats.databases, label: 'Datenbanken', color: 'text-blue-600' },
    { value: stats.game, label: 'Game', color: 'text-rose-600' },
  ]

  return (
    <div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-10 gap-4 mb-6">
      {items.map((item) => (
        <div key={item.label} className="bg-white rounded-lg shadow p-4">
          <div className={`text-3xl font-bold ${item.color}`}>{item.value}</div>
          <div className="text-sm text-slate-500">{item.label}</div>
        </div>
      ))}
    </div>
  )
}