import { Card, CardContent } from "@/components/ui/card"
import { formatNumber, getGrowthClass } from "@/lib/utils"
import { ArrowDown, ArrowUp, Users, UserCheck, Star, TrendingUp } from "lucide-react"

export function UserPoolStats() {
  // 这里应该从API获取实际数据
  const stats = [
    {
      title: "总用户数",
      value: 125689,
      change: 12.5,
      icon: <Users className="h-4 w-4" />,
    },
    {
      title: "活跃用户",
      value: 78452,
      change: 8.3,
      icon: <UserCheck className="h-4 w-4" />,
    },
    {
      title: "高价值用户",
      value: 12458,
      change: 15.2,
      icon: <Star className="h-4 w-4" />,
    },
    {
      title: "转化率",
      value: 12.5,
      change: -2.3,
      icon: <TrendingUp className="h-4 w-4" />,
      isPercentage: true,
    },
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat) => (
        <Card key={stat.title}>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div className="bg-primary/10 rounded-full p-2 text-primary">{stat.icon}</div>
              <div className={`flex items-center ${getGrowthClass(stat.change)}`}>
                {stat.change > 0 ? <ArrowUp className="h-4 w-4 mr-1" /> : <ArrowDown className="h-4 w-4 mr-1" />}
                <span>{Math.abs(stat.change)}%</span>
              </div>
            </div>
            <div className="mt-3">
              <p className="text-sm text-muted-foreground">{stat.title}</p>
              <p className="text-2xl font-bold">{stat.isPercentage ? `${stat.value}%` : formatNumber(stat.value)}</p>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}