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

const data = [
  { kategori: "Bhn Pokok", jan: 85, feb: 90, mar: 78, apr: 92, mei: 88, jun: 95, jul: 80, ags: 87, sep: 91, okt: 84, nov: 89, des: 93 },
];

const flatData = [
  { bulan: "Jan", value: 85 },
  { bulan: "Feb", value: 90 },
  { bulan: "Mar", value: 78 },
  { bulan: "Apr", value: 92 },
  { bulan: "Mei", value: 88 },
  { bulan: "Jun", value: 95 },
  { bulan: "Jul", value: 80 },
  { bulan: "Ags", value: 87 },
  { bulan: "Sep", value: 91 },
  { bulan: "Okt", value: 84 },
  { bulan: "Nov", value: 89 },
  { bulan: "Des", value: 93 },
];

const colors = [
  "hsl(213 70% 35%)",
  "hsl(213 70% 50%)",
  "hsl(152 55% 42%)",
  "hsl(152 55% 55%)",
  "hsl(43 90% 55%)",
  "hsl(28 85% 55%)",
];

export default function KomposisiChart() {
  return (
    <div className="bg-card rounded-xl border border-border p-5 sm:p-6">
      <h3 className="font-bold text-foreground mb-4">Komposisi Pengeluaran Nasional</h3>
      <ResponsiveContainer width="100%" height={280}>
        <BarChart data={flatData} barSize={24}>
          <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 />
          <Bar dataKey="value" name="Pengeluaran (M)" fill="hsl(213 70% 35%)" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}