"use client"

import { useTranslations } from "next-intl"
import { Target, CheckCircle2, TrendingUp, Award } from "lucide-react"

import { Card, CardContent } from "@/shared/components/ui/card"

import type { PracticeStats } from "../types"

interface PracticeStatsCardsProps {
  stats: PracticeStats
}

/**
 * 专项练习统计卡片
 */
export function PracticeStatsCards({ stats }: PracticeStatsCardsProps): React.ReactNode {
  const t = useTranslations("practice")

  const accuracyPercent = Math.round(stats.overallAccuracy * 100)

  return (
    <div className="grid gap-4 md:grid-cols-4">
      <Card>
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">{t("stats.totalSessions")}</p>
              <p className="text-2xl font-bold">{stats.totalSessions}</p>
            </div>
            <Target className="h-8 w-8 text-primary opacity-80" />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">{t("stats.completed")}</p>
              <p className="text-2xl font-bold">{stats.completedSessions}</p>
            </div>
            <CheckCircle2 className="h-8 w-8 text-emerald-500 opacity-80" />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">{t("stats.totalAnswered")}</p>
              <p className="text-2xl font-bold">{stats.totalQuestionsAnswered}</p>
            </div>
            <Award className="h-8 w-8 text-amber-500 opacity-80" />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">{t("stats.accuracy")}</p>
              <p className="text-2xl font-bold">{accuracyPercent}%</p>
            </div>
            <TrendingUp className="h-8 w-8 text-blue-500 opacity-80" />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
