import { useMemo } from 'react';
import { BaseChart } from '../BaseChart';
import type { EChartsOption } from 'echarts';
import { chartSeriesColors } from '@lib/theme';

interface Series {
  key: string;
  name: string;
  color?: string;
}

interface AreaChartProps {
  data: Record<string, unknown>[];
  xKey: string;
  series: Series[];
  height?: number;
  className?: string;
  yAxisDomain?: [number, number];
}

export function AreaChart({ data, xKey, series, height = 200, className, yAxisDomain }: AreaChartProps) {
  const option = useMemo<EChartsOption>(() => ({
    grid: { top: 10, right: 10, bottom: 24, left: 36, containLabel: false },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: data.map(d => d[xKey] as string), boundaryGap: false },
    yAxis: { type: 'value', ...(yAxisDomain ? { min: yAxisDomain[0], max: yAxisDomain[1] } : {}) },
    series: series.map((s, i) => ({
      name: s.name,
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: data.map(d => d[s.key] as number),
      lineStyle: { width: 2 },
      areaStyle: { opacity: 0.12 },
      itemStyle: { color: s.color ?? chartSeriesColors[i % chartSeriesColors.length] },
    })),
  }), [data, xKey, series, yAxisDomain]);

  return <BaseChart option={option} height={height} className={className} />;
}
