"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"

export function UserGrowthChart() {
  // 这里应该从API获取实际数据
  const data = [
    { date: "1月", users: 4000 },
    { date: "2月", users: 5000 },
    { date: "3月", users: 6000 },
    { date: "4月", users: 7000 },
    { date: "5月", users: 9000 },
    { date: "6月", users: 12000 },
    { date: "7月", users: 15000 },
  ]

  return (
    <Card className="col-span-2">
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">用户增长趋势</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[200px]">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={data}>
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Line type="monotone" dataKey="users" stroke="hsl(var(--primary))" strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}