"use client"

import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts"

const data = [
  {
    name: "1月",
    对话: 4000,
    卡牌激活: 2400,
  },
  {
    name: "2月",
    对话: 4500,
    卡牌激活: 2800,
  },
  {
    name: "3月",
    对话: 5000,
    卡牌激活: 3200,
  },
  {
    name: "4月",
    对话: 6000,
    卡牌激活: 3600,
  },
  {
    name: "5月",
    对话: 5500,
    卡牌激活: 3300,
  },
  {
    name: "6月",
    对话: 7000,
    卡牌激活: 4000,
  },
  {
    name: "7月",
    对话: 8500,
    卡牌激活: 4800,
  },
]

export function Overview() {
  return (
    <ResponsiveContainer width="100%" height={350}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
        <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
        <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}`} />
        <Tooltip
          contentStyle={{
            backgroundColor: "white",
            borderRadius: "8px",
            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
            border: "none",
          }}
        />
        <Bar dataKey="对话" fill="url(#colorUv)" radius={[4, 4, 0, 0]} barSize={30} animationDuration={1500} />
        <Bar dataKey="卡牌激活" fill="url(#colorPv)" radius={[4, 4, 0, 0]} barSize={30} animationDuration={1500} />
        <defs>
          <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#d946ef" stopOpacity={0.8} />
            <stop offset="95%" stopColor="#d946ef" stopOpacity={0.3} />
          </linearGradient>
          <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.8} />
            <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0.3} />
          </linearGradient>
        </defs>
      </BarChart>
    </ResponsiveContainer>
  )
}