'use client'

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

const data = [
  { time: '00:00', value: 58 },
  { time: '02:00', value: 55 },
  { time: '04:00', value: 52 },
  { time: '06:00', value: 54 },
  { time: '08:00', value: 62 },
  { time: '10:00', value: 68 },
  { time: '12:00', value: 72 },
  { time: '14:00', value: 78 },
  { time: '16:00', value: 75 },
  { time: '18:00', value: 70 },
  { time: '20:00', value: 65 },
  { time: '22:00', value: 60 },
]

export default function MemoryChart() {
  return (
    <ResponsiveContainer width="100%" height={200}>
      <AreaChart data={data}>
        <defs>
          <linearGradient id="memoryGradient" 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="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}%`, 'Memory']}
        />
        <Area
          type="monotone"
          dataKey="value"
          stroke="#8b5cf6"
          strokeWidth={2}
          fill="url(#memoryGradient)"
        />
      </AreaChart>
    </ResponsiveContainer>
  )
}
