import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'Mon', usage: 4000, cost: 2400 },
  { name: 'Tue', usage: 3000, cost: 1398 },
  { name: 'Wed', usage: 2000, cost: 9800 },
  { name: 'Thu', usage: 2780, cost: 3908 },
  { name: 'Fri', usage: 1890, cost: 4800 },
  { name: 'Sat', usage: 2390, cost: 3800 },
  { name: 'Sun', usage: 3490, cost: 4300 },
];

const AnalyticsChart = () => {
  return (
    <div className="w-full h-[300px] mt-8 glass-card">
      <h3 className="text-sm font-semibold uppercase tracking-widest text-text-secondary mb-6">Agent Performance & Usage</h3>
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart
          data={data}
          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
        >
          <defs>
            <linearGradient id="colorUsage" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.3}/>
              <stop offset="95%" stopColor="#3B82F6" stopOpacity={0}/>
            </linearGradient>
            <linearGradient id="colorCost" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#8B5CF6" stopOpacity={0.3}/>
              <stop offset="95%" stopColor="#8B5CF6" stopOpacity={0}/>
            </linearGradient>
          </defs>
          <XAxis 
            dataKey="name" 
            axisLine={false} 
            tickLine={false} 
            tick={{ fill: '#94A3B8', fontSize: 12 }} 
          />
          <Tooltip 
            contentStyle={{ 
              backgroundColor: '#111827', 
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: '12px'
            }} 
            itemStyle={{ color: '#fff' }}
          />
          <Area 
            type="monotone" 
            dataKey="usage" 
            stroke="#3B82F6" 
            fillOpacity={1} 
            fill="url(#colorUsage)" 
            strokeWidth={2}
          />
          <Area 
            type="monotone" 
            dataKey="cost" 
            stroke="#8B5CF6" 
            fillOpacity={1} 
            fill="url(#colorCost)" 
            strokeWidth={2}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
};

export default AnalyticsChart;