"use client"

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

export function TrafficSourceAnalysis() {
  // 这里应该从API获取实际数据
  const data = [
    { source: "微信", value: 4000 },
    { source: "抖音", value: 3000 },
    { source: "小红书", value: 2000 },
    { source: "公众号", value: 2780 },
    { source: "官网", value: 1890 },
    { source: "其他", value: 2390 },
  ]

  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">流量来源分析</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[200px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={data}>
              <XAxis dataKey="source" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="value" fill="hsl(var(--primary))" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}