"use client";

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

interface Props {
  data: { mois: string; revenus: number }[];
  devise: string;
}

export function RevenueChart({ data, devise }: Props) {
  return (
    <ResponsiveContainer width="100%" height={250}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
        <XAxis dataKey="mois" tick={{ fontSize: 11 }} />
        <YAxis tick={{ fontSize: 11 }} />
        <Tooltip
          formatter={(value: number) => [formatMoney(value, devise), "Revenus"]}
          contentStyle={{ borderRadius: 6, fontSize: 12 }}
        />
        <Line
          type="monotone"
          dataKey="revenus"
          stroke="#2D6A4F"
          strokeWidth={2.5}
          dot={{ r: 4, fill: "#2D6A4F" }}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}