"use client";

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

const COLORS = ["#0F6E56", "#1D9E75", "#3FB58C", "#6BC9A8", "#9BDCC4"];

export default function CategoryChart({ data }: { data: { name: string; count: number }[] }) {
  return (
    <ResponsiveContainer width="100%" height={280}>
      <BarChart data={data} margin={{ top: 10, right: 12, left: -16, bottom: 40 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="#EAE3D2" vertical={false} />
        <XAxis
          dataKey="name"
          tick={{ fontSize: 10, fill: "#6B6B66" }}
          axisLine={false}
          tickLine={false}
          angle={-25}
          textAnchor="end"
          interval={0}
          height={50}
        />
        <YAxis allowDecimals={false} tick={{ fontSize: 12, fill: "#6B6B66" }} axisLine={false} tickLine={false} />
        <Tooltip
          cursor={{ fill: "#F5F1E8" }}
          contentStyle={{ borderRadius: 12, border: "1px solid #EAE3D2", fontSize: 13 }}
        />
        <Bar dataKey="count" radius={[6, 6, 0, 0]} maxBarSize={48}>
          {data.map((_, i) => (
            <Cell key={i} fill={COLORS[i % COLORS.length]} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}