"use client";

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

interface Props {
  data: any[];
}

const COLORS = [
  "#2563EB",
  "#EA580C",
  "#16A34A",
];

export default function StatusChart({
  data,
}: Props) {
  return (
    <div className="rounded-2xl border bg-white p-6 shadow-sm">

      <div className="mb-6">
        <h2 className="text-xl font-semibold">
          Status Distribution
        </h2>

        <p className="text-sm text-gray-500">
          Current enquiry pipeline
        </p>
      </div>

      <ResponsiveContainer
        width="100%"
        height={320}
      >
        <BarChart data={data}>

          <CartesianGrid strokeDasharray="3 3" />

          <XAxis dataKey="status" />

          <YAxis allowDecimals={false} />

          <Tooltip />

          <Bar dataKey="count" radius={[8,8,0,0]}>

            {data.map((_, index) => (
              <Cell
                key={index}
                fill={COLORS[index]}
              />
            ))}

          </Bar>

        </BarChart>
      </ResponsiveContainer>

    </div>
  );
}