
import { AlertCircle, BarChart3, CheckCircle2, PenTool } from "lucide-react"

import { StatCard } from "@/shared/components/ui/stat-card"

interface ClassOverviewStatsProps {
  averageScore: number | null
  submissionRate: number
  papersToGrade: number
  overdueCount: number
}

export function ClassOverviewStats({
  averageScore,
  submissionRate,
  papersToGrade,
  overdueCount,
}: ClassOverviewStatsProps) {
  return (
    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
      <StatCard
        title="Class Average"
        value={averageScore ? `${averageScore.toFixed(1)}%` : "-"}
        description="Overall performance"
        icon={BarChart3}
      />
      <StatCard
        title="Submission Rate"
        value={`${submissionRate.toFixed(0)}%`}
        description="Average turn-in rate"
        icon={CheckCircle2}
      />
      <StatCard
        title="To Grade"
        value={papersToGrade.toString()}
        description="Pending reviews"
        icon={PenTool}
      />
      <StatCard
        title="Missed Deadlines"
        value={overdueCount.toString()}
        description="Active assignments past due"
        icon={AlertCircle}
      />
    </div>
  )
}
