"use client"

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

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) {
  const t = useTranslations("classes")
  return (
    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
      <StatCard
        title={t("detail.overview.averageScore")}
        value={averageScore ? `${averageScore.toFixed(1)}%` : "-"}
        description={t("detail.overview.overallPerformance")}
        icon={BarChart3}
      />
      <StatCard
        title={t("detail.overview.submissionRate")}
        value={`${submissionRate.toFixed(0)}%`}
        description={t("detail.overview.averageTurnInRate")}
        icon={CheckCircle2}
      />
      <StatCard
        title={t("detail.overview.papersToGrade")}
        value={papersToGrade.toString()}
        description={t("detail.overview.pendingReviews")}
        icon={PenTool}
      />
      <StatCard
        title={t("detail.overview.overdueCount")}
        value={overdueCount.toString()}
        description={t("detail.overview.activeAssignmentsPastDue")}
        icon={AlertCircle}
      />
    </div>
  )
}
