import { FileCheck, PenTool, TrendingUp, BarChart } from "lucide-react"
import { getTranslations } from "next-intl/server"
import { StatCard } from "@/shared/components/ui/stat-card"

interface TeacherStatsProps {
  toGradeCount: number
  activeAssignmentsCount: number
  averageScore: number
  submissionRate: number
}

export async function TeacherStats({
  toGradeCount,
  activeAssignmentsCount,
  averageScore,
  submissionRate,
}: TeacherStatsProps) {
  const t = await getTranslations("dashboard")

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <StatCard
        title={t("stats.needsGrading")}
        value={String(toGradeCount)}
        description={t("stats.submissionsPendingReview")}
        icon={FileCheck}
        href="/teacher/homework/submissions?status=submitted"
        highlight={toGradeCount > 0}
        color="text-amber-500"
        valueClassName="tabular-nums"
      />
      <StatCard
        title={t("stats.activeAssignments")}
        value={String(activeAssignmentsCount)}
        description={t("stats.publishedAndOngoing")}
        icon={PenTool}
        href="/teacher/homework/assignments?status=published"
        color="text-blue-500"
        valueClassName="tabular-nums"
      />
      <StatCard
        title={t("stats.averageScore")}
        value={`${Math.round(averageScore)}%`}
        description={t("stats.acrossRecentAssignments")}
        icon={TrendingUp}
        href="#grade-trends"
        color="text-emerald-500"
        valueClassName="tabular-nums"
      />
      <StatCard
        title={t("stats.submissionRate")}
        value={`${Math.round(submissionRate)}%`}
        description={t("stats.overallCompletionRate")}
        icon={BarChart}
        href="#grade-trends"
        color="text-purple-500"
        valueClassName="tabular-nums"
      />
    </div>
  )
}
