import { BookX, Clock, GraduationCap, Repeat, Sparkles } from "lucide-react"

import { StatCard } from "@/shared/components/ui/stat-card"
import type { ErrorBookStats } from "../types"

interface ErrorBookStatsCardsProps {
  stats: ErrorBookStats
  isLoading?: boolean
}

export function ErrorBookStatsCards({ stats, isLoading }: ErrorBookStatsCardsProps) {
  const masteredPercent = stats.totalCount > 0
    ? Math.round(stats.masteredRate * 100)
    : 0

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
      <StatCard
        title="错题总数"
        value={stats.totalCount}
        icon={BookX}
        description="累计收录的错题"
        isLoading={isLoading}
      />
      <StatCard
        title="待学习"
        value={stats.newCount}
        icon={Sparkles}
        color="text-blue-500"
        description="尚未开始复习"
        isLoading={isLoading}
      />
      <StatCard
        title="学习中"
        value={stats.learningCount}
        icon={Repeat}
        color="text-amber-500"
        description="正在复习掌握"
        isLoading={isLoading}
      />
      <StatCard
        title="已掌握"
        value={stats.masteredCount}
        icon={GraduationCap}
        color="text-emerald-500"
        description={`掌握率 ${masteredPercent}%`}
        isLoading={isLoading}
      />
      <StatCard
        title="待复习"
        value={stats.dueReviewCount}
        icon={Clock}
        color="text-rose-500"
        description="今日到期复习"
        highlight={stats.dueReviewCount > 0}
        isLoading={isLoading}
      />
    </div>
  )
}
