import * as React from "react"

import { cn } from "@/shared/lib/utils"

/**
 * 统计项：用于统计面板内部网格中的紧凑统计单元。
 *
 * 覆盖以下重复模式：
 * - AttendanceStatsCard 内部 StatItem
 * - GradeStatsCard 内部 StatItem
 *
 * 结构：rounded-lg border bg-card 容器，含 label + icon + value + hint
 */
interface StatItemProps {
  /** 统计项标签 */
  label: string
  /** 统计数值 */
  value: string | number
  /** 图标节点（如 <Users className="h-4 w-4" />） */
  icon?: React.ReactNode
  /** 底部提示文本 */
  hint?: string
  /** 数值自定义类名（如 "text-red-500"） */
  valueClassName?: string
}

export function StatItem({ label, value, icon, hint, valueClassName }: StatItemProps) {
  return (
    <div className="flex flex-col gap-1 rounded-lg border bg-card p-4">
      <div className="flex items-center justify-between">
        <span className="text-xs font-medium text-muted-foreground">{label}</span>
        {icon ? <span className="text-muted-foreground">{icon}</span> : null}
      </div>
      <span className={cn("text-2xl font-bold", valueClassName)}>{value}</span>
      {hint ? <span className="text-xs text-muted-foreground">{hint}</span> : null}
    </div>
  )
}
