'use client';

import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';

type Point = {
  ts: string;
  capital: number;
};

type 球員道具盤 = {
  title: string;
  points: Point[];
  maxDrawdown: number;
};

export function EquityCurveChart({ title, points, maxDrawdown }: 球員道具盤) {
  return (
    <article className="panel-glow rounded-2xl p-4">
      <h3 className="dot-matrix text-lg text-[#7d2a15]">{title}</h3>
      <div className="mt-3 h-72 w-full">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={points} margin={{ top: 6, right: 18, bottom: 6, left: 6 }}>
            <defs>
              <linearGradient id="equityGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#d1432d" stopOpacity={0.45} />
                <stop offset="100%" stopColor="#d1432d" stopOpacity={0.02} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="4 4" stroke="#eadcb9" />
            <XAxis dataKey="ts" tick={{ fill: '#6d4d39', fontSize: 11 }} />
            <YAxis tick={{ fill: '#6d4d39', fontSize: 11 }} />
            <Tooltip
              contentStyle={{ background: '#fff8e6', borderColor: '#d8b58c' }}
              itemStyle={{ color: '#5f4031' }}
            />
            <Area
              type="monotone"
              dataKey="capital"
              stroke="#b83822"
              fill="url(#equityGradient)"
              strokeWidth={2.4}
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
      <p className="mt-3 text-sm font-semibold text-[#8c2f2f]">最大回撤：{maxDrawdown.toFixed(2)}%</p>
    </article>
  );
}