'use client'

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts'

const data = [
  { time: '00:00', value: 35 },
  { time: '02:00', value: 28 },
  { time: '04:00', value: 22 },
  { time: '06:00', value: 25 },
  { time: '08:00', value: 45 },
  { time: '10:00', value: 62 },
  { time: '12:00', value: 58 },
  { time: '14:00', value: 72 },
  { time: '16:00', value: 68 },
  { time: '18:00', value: 55 },
  { time: '20:00', value: 48 },
  { time: '22:00', value: 42 },
]

export default function CpuChart() {
  return (
    <ResponsiveContainer width="100%" height={200}>
      <AreaChart data={data}>
        <defs>
          <linearGradient id="cpuGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#22c55e" stopOpacity={0.3} />
            <stop offset="95%" stopColor="#22c55e" stopOpacity={0} />
          </linearGradient>
        </defs>
        <XAxis
          dataKey="time"
          stroke="#64748b"
          fontSize={12}
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          stroke="#64748b"
          fontSize={12}
          tickLine={false}
          axisLine={false}
          tickFormatter={(value) => `${value}%`}
          domain={[0, 100]}
        />
        <Tooltip
          contentStyle={{
            backgroundColor: '#1e293b',
            border: '1px solid #334155',
            borderRadius: '8px',
          }}
          labelStyle={{ color: '#94a3b8' }}
          formatter={(value: number) => [`${value}%`, 'CPU']}
        />
        <Area
          type="monotone"
          dataKey="value"
          stroke="#22c55e"
          strokeWidth={2}
          fill="url(#cpuGradient)"
        />
      </AreaChart>
    </ResponsiveContainer>
  )
}
