"use client";

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  CartesianGrid,
} from "recharts";

interface Props {
  data: any[];
}

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

      <div className="mb-6">
          <h2 className="text-xl font-semibold">
              Monthly Enquiry Trend
          </h2>

          <p className="text-sm text-gray-500">
              Number of enquiries received each month
          </p>
      </div>

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

          <CartesianGrid strokeDasharray="3 3" />

          <XAxis dataKey="month" />

          <YAxis allowDecimals={false} />

          <Tooltip
            formatter={(value) => [`${value} Enquiries`, "Total"]}
          />

          <Line
            type="monotone"
            dataKey="enquiries"
            stroke="#C9A227"
            strokeWidth={3}
            dot={{ r: 5 }}
            activeDot={{ r: 8 }}
          />

        </LineChart>
      </ResponsiveContainer>

    </div>
  );
}