"use client";

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import { MONTH_NAMES } from "@/lib/data";

type Props = {
  income: (number | null)[];
  fixed: (number | null)[];
  running: (number | null)[];
};

export function MachineLineChart({ income, fixed, running }: Props) {
  const data = MONTH_NAMES.map((m, i) => ({
    month: m,
    income: income[i] ?? null,
    fixed: fixed[i] ?? null,
    running: running[i] ?? null,
  }));

  const fmt = (v: number) =>
    new Intl.NumberFormat("en-ZA", { style: "currency", currency: "ZAR", maximumFractionDigits: 0, notation: "compact" }).format(v);

  return (
    <div className="h-44">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 5, right: 10, left: 0, bottom: 0 }}>
          <CartesianGrid stroke="#f3f4f6" strokeDasharray="3 3" vertical={false} />
          <XAxis dataKey="month" stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} />
          <YAxis stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={fmt} width={60} />
          <Tooltip formatter={(v: number) => fmt(v)} />
          <Line type="monotone" dataKey="income" stroke="#00798C" strokeWidth={2.5} dot={{ r: 3, fill: "#00798C" }} connectNulls={false} />
          <Line type="monotone" dataKey="fixed" stroke="#EDAE49" strokeWidth={2.5} dot={{ r: 3, fill: "#EDAE49" }} connectNulls={false} />
          <Line type="monotone" dataKey="running" stroke="#D1495B" strokeWidth={2.5} dot={{ r: 3, fill: "#D1495B" }} connectNulls={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}