'use client'

interface StatsOverviewProps {
  phaseStats: { completed: number; total: number; inProgress: number }
  featureStats: { percentage: number; done: number; total: number }
  feedbackStats: { newCount: number; total: number; bugs: number; requests: number }
}

export default function StatsOverview({ phaseStats, featureStats, feedbackStats }: StatsOverviewProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div className="bg-white rounded-xl border border-slate-200 p-4">
        <div className="text-sm text-slate-500 mb-1">Roadmap-Phasen</div>
        <div className="text-2xl font-bold text-primary-600">{phaseStats.completed}/{phaseStats.total}</div>
        <div className="text-xs text-slate-400">{phaseStats.inProgress} in Arbeit</div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-4">
        <div className="text-sm text-slate-500 mb-1">Features</div>
        <div className="text-2xl font-bold text-green-600">{featureStats.percentage}%</div>
        <div className="text-xs text-slate-400">{featureStats.done}/{featureStats.total} fertig</div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-4">
        <div className="text-sm text-slate-500 mb-1">Neues Feedback</div>
        <div className="text-2xl font-bold text-amber-600">{feedbackStats.newCount}</div>
        <div className="text-xs text-slate-400">{feedbackStats.total} gesamt</div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-4">
        <div className="text-sm text-slate-500 mb-1">Offene Bugs</div>
        <div className="text-2xl font-bold text-red-600">{feedbackStats.bugs}</div>
        <div className="text-xs text-slate-400">{feedbackStats.requests} Feature-Requests</div>
      </div>
    </div>
  )
}