"use client"

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

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 t = useTranslations("errorBook")
  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={t("stats.total")}
        value={stats.totalCount}
        icon={BookX}
        description={t("stats.totalDesc")}
        isLoading={isLoading}
      />
      <StatCard
        title={t("stats.new")}
        value={stats.newCount}
        icon={Sparkles}
        color="text-blue-500"
        description={t("stats.newDesc")}
        isLoading={isLoading}
      />
      <StatCard
        title={t("stats.learning")}
        value={stats.learningCount}
        icon={Repeat}
        color="text-amber-500"
        description={t("stats.learningDesc")}
        isLoading={isLoading}
      />
      <StatCard
        title={t("stats.mastered")}
        value={stats.masteredCount}
        icon={GraduationCap}
        color="text-emerald-500"
        description={t("stats.masteredDesc", { rate: masteredPercent })}
        isLoading={isLoading}
      />
      <StatCard
        title={t("stats.dueReview")}
        value={stats.dueReviewCount}
        icon={Clock}
        color="text-rose-500"
        description={t("stats.dueReviewDesc")}
        highlight={stats.dueReviewCount > 0}
        isLoading={isLoading}
      />
    </div>
  )
}
