import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatNumber } from "@/lib/utils"

export function UserAssetsSummary() {
  // 这里应该从API获取实际数据
  const stats = {
    totalUsers: 125689,
    activeUsers: 78452,
    highValueUsers: 12458,
    conversionRate: 12.5,
  }

  return (
    <Card className="border shadow-sm">
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">用户资产概览</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">总用户数</p>
            <p className="text-2xl font-bold">{formatNumber(stats.totalUsers)}</p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">活跃用户</p>
            <p className="text-2xl font-bold">{formatNumber(stats.activeUsers)}</p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">高价值用户</p>
            <p className="text-2xl font-bold">{formatNumber(stats.highValueUsers)}</p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">转化率</p>
            <p className="text-2xl font-bold">{stats.conversionRate}%</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}