"use client";

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

import type { OwnerComparisonRow } from "@/lib/owner/dashboard";

const COLORS = ["#c2410c", "#94a3b8", "#64748b"];

export function CategoryComparisonChart({ data }: { data: OwnerComparisonRow[] }) {
  return (
    <div className="h-[260px] w-full" style={{ fontFamily: "Manrope, sans-serif" }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} margin={{ top: 8, right: 16, left: 8, bottom: 24 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
          <XAxis dataKey="label" tick={{ fontSize: 11, fill: "#0c1828" }} />
          <YAxis
            tick={{ fontSize: 11, fill: "#64748b" }}
            tickFormatter={(value: number) => `${value}%`}
          />
          <Tooltip
            formatter={(value) => [`${(Number(value) || 0).toFixed(2)}%`, "CTR"]}
            contentStyle={{ borderRadius: 12, fontSize: 12 }}
          />
          <Bar dataKey="ctr" radius={[8, 8, 0, 0]}>
            {data.map((_, idx) => (
              <Cell key={idx} fill={COLORS[idx % COLORS.length]} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}