import React, { memo, useMemo } from 'react';
import { equityToSparkline, sparklinePath } from '../../utils/backtestEquity';
import type { EquityPoint } from '../../utils/backtestEquity';

interface Props {
  curve: EquityPoint[];
  positive?: boolean;
  width?: number;
  height?: number;
}

const BacktestSparkline: React.FC<Props> = memo(({
  curve,
  positive = true,
  width = 72,
  height = 28,
}) => {
  const path = useMemo(() => {
    const values = equityToSparkline(curve);
    return sparklinePath(values, width, height);
  }, [curve, width, height]);

  const stroke = positive ? '#22c55e' : '#ef4444';
  const fill = positive ? 'rgba(34,197,94,0.12)' : 'rgba(239,68,68,0.12)';

  return (
    <svg className="btd-sparkline" width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <path d={`${path} L${width},${height} L0,${height} Z`} fill={fill} stroke="none" />
      <path d={path} fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
});

BacktestSparkline.displayName = 'BacktestSparkline';
export default BacktestSparkline;
