import React from 'react';
import { Card, DatePicker } from 'antd';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const CampaignPerformance = () => {
  const data = [
    { name: '1月', 点击率: 400, 转化率: 240 },
    { name: '2月', 点击率: 300, 转化率: 139 },
    { name: '3月', 点击率: 200, 转化率: 980 },
  ];

  return (
    <Card title="活动成效分析">
      <div className="mb-4">
        <DatePicker.RangePicker />
      </div>
      <div style={{ width: '100%', height: 400 }}>
        <ResponsiveContainer>
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="点击率" stroke="#8884d8" />
            <Line type="monotone" dataKey="转化率" stroke="#82ca9d" />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
};

export default CampaignPerformance;