import React from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';

const data = [
  { name: 'Jan', sales: 4000 },
  { name: 'Feb', sales: 3000 },
  { name: 'Mar', sales: 5000 },
  { name: 'Apr', sales: 4000 },
  { name: 'May', sales: 7000 },
  { name: 'Jun', sales: 6000 },
];

const BarChartComponent = () => {
  return (
    <div className="w-full h-96 bg-white p-6 rounded-lg ">
      <h2 className="text-xl font-bold text-gray-800 mb-4">Monthly Sales</h2>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          data={data}
          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" stroke="#888888" />
          <YAxis stroke="#888888" />
          <Tooltip contentStyle={{ backgroundColor: '#ffffff', border: '1px solid #cccccc' }} />
          {/* Removed <Legend /> */}
          <Bar dataKey="sales" fill="#4F46E5" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
};

export default BarChartComponent;