"use client";

import { ComposedChart, Bar, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, Legend } from "recharts";
import { formatVND, formatVNDCompact } from "@/lib/finance";

export function CashFlowChart({ history }: { history: { period: string; thu: number; chi: number; rong: number }[] }) {
  return (
    <ResponsiveContainer width="100%" height={280}>
      <ComposedChart data={history} margin={{ top: 10, right: 10, left: -10, bottom: 0 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="#eef2f6" />
        <XAxis dataKey="period" tick={{ fontSize: 12, fill: "#64748b" }} />
        <YAxis tick={{ fontSize: 12, fill: "#64748b" }} tickFormatter={(v) => formatVNDCompact(v)} />
        <Tooltip formatter={(v: number) => formatVND(v)} />
        <Legend />
        <Bar dataKey="thu" name="Thu" fill="#14b8a6" radius={[4, 4, 0, 0]} />
        <Bar dataKey="chi" name="Chi" fill="#fb923c" radius={[4, 4, 0, 0]} />
        <Line dataKey="rong" name="Dòng tiền ròng" stroke="#2563eb" strokeWidth={2} dot={{ r: 3 }} />
      </ComposedChart>
    </ResponsiveContainer>
  );
}