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

const data = [
  { bulan: "10 Sept", masuk: 80, tersalur: 60, sisa: 20 },
  { bulan: "21 Sept", masuk: 90, tersalur: 70, sisa: 20 },
  { bulan: "30 Sept", masuk: 70, tersalur: 55, sisa: 15 },
  { bulan: "10 Okt", masuk: 100, tersalur: 80, sisa: 20 },
  { bulan: "1 Nov", masuk: 85, tersalur: 65, sisa: 20 },
  { bulan: "1 Des", masuk: 95, tersalur: 75, sisa: 20 },
];

export default function TrenDistribusiChart() {
  return (
    <div className="bg-card rounded-xl border border-border p-5 sm:p-6">
      <h3 className="font-bold text-foreground mb-4">Tren Distribusi Dana Nasional</h3>
      <ResponsiveContainer width="100%" height={280}>
        <BarChart data={data} barGap={2} barSize={14}>
          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(210 25% 90%)" />
          <XAxis dataKey="bulan" fontSize={11} tickLine={false} axisLine={false} />
          <YAxis fontSize={11} tickLine={false} axisLine={false} />
          <Tooltip />
          <Legend iconType="circle" wrapperStyle={{ fontSize: 12 }} />
          <Bar dataKey="masuk" name="Dana Masuk" fill="hsl(213 70% 35%)" radius={[3, 3, 0, 0]} />
          <Bar dataKey="tersalur" name="Dana Tersalur" fill="hsl(152 55% 42%)" radius={[3, 3, 0, 0]} />
          <Bar dataKey="sisa" name="Sisa Dana" fill="hsl(210 25% 80%)" radius={[3, 3, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}