import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";

const data = [
  { bulan: "Jan", pengeluaran: 45000000 },
  { bulan: "Feb", pengeluaran: 52000000 },
  { bulan: "Mar", pengeluaran: 48000000 },
  { bulan: "Apr", pengeluaran: 61000000 },
  { bulan: "Mei", pengeluaran: 55000000 },
  { bulan: "Jun", pengeluaran: 67000000 },
];

const formatM = (v) => `${(v / 1000000).toFixed(0)}M`;

export default function DetailCharts() {
  return (
    <div className="bg-card rounded-xl border border-border p-5 sm:p-6">
      <h3 className="font-bold text-foreground mb-4">Grafik Pengeluaran</h3>
      <ResponsiveContainer width="100%" height={280}>
        <BarChart data={data} barSize={32}>
          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(210 25% 88%)" />
          <XAxis dataKey="bulan" fontSize={12} tickLine={false} axisLine={false} />
          <YAxis fontSize={12} tickFormatter={formatM} tickLine={false} axisLine={false} />
          <Tooltip formatter={(v) => [`Rp ${v.toLocaleString("id-ID")}`, "Pengeluaran"]} />
          <Bar dataKey="pengeluaran" fill="hsl(213 70% 35%)" radius={[6, 6, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}