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

interface TeacherStatsProps {
  toGradeCount: number;
  activeAssignmentsCount: number;
  averageScore: number;
  submissionRate: number;
  isLoading?: boolean;
}

export function TeacherStats({
  toGradeCount,
  activeAssignmentsCount,
  averageScore,
  submissionRate,
  isLoading = false,
}: TeacherStatsProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <StatCard
        title="Needs Grading"
        value={String(toGradeCount)}
        description="Submissions pending review"
        icon={FileCheck}
        href="/teacher/homework/submissions?status=submitted"
        highlight={toGradeCount > 0}
        color="text-amber-500"
        isLoading={isLoading}
      />
      <StatCard
        title="Active Assignments"
        value={String(activeAssignmentsCount)}
        description="Published and ongoing"
        icon={PenTool}
        href="/teacher/homework/assignments?status=published"
        color="text-blue-500"
        isLoading={isLoading}
      />
      <StatCard
        title="Average Score"
        value={`${Math.round(averageScore)}%`}
        description="Across recent assignments"
        icon={TrendingUp}
        href="#grade-trends"
        color="text-emerald-500"
        isLoading={isLoading}
      />
      <StatCard
        title="Submission Rate"
        value={`${Math.round(submissionRate)}%`}
        description="Overall completion rate"
        icon={BarChart}
        href="#grade-trends"
        color="text-purple-500"
        isLoading={isLoading}
      />
    </div>
  );
}