'use client';

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'Jan', activeUsers: 100 },
  { month: 'Feb', activeUsers: 120 },
  { month: 'Mar', activeUsers: 180 },
  { month: 'Apr', activeUsers: 250 },
  { month: 'May', activeUsers: 300 },
];

export default function MonthlyActivityChart() {
  return (
    <div className="bg-white p-4 rounded-lg shadow-md mt-4">
      <h2 className="text-lg font-semibold mb-2">Active Users Per Month</h2>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="month" />
          <YAxis />
          <Tooltip />
          <Line type="monotone" dataKey="activeUsers" stroke="#3b82f6" strokeWidth={2} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}
    