import { useMemo } from 'react';
import LineChartPreview from './LineChartPreview';

const CHART_HEIGHT = 240;

/**
 * 服务数据大屏趋势图：走 Dashboard 折线图规范（LineChartPreview → SmartLineChart）。
 * 纵轴：占位宽度 44px，满足「刻度文字与绘图区」约 16px 间距（见服务数据大屏标注）。
 *
 * @param {Record<string, unknown>[]} data
 * @param {{ dataKey: string, name: string, colorToken: string }[]} series
 */
export default function ServiceDataTrendChart({ data, series }) {
  const legendItems = useMemo(
    () =>
      (series || []).map((item) => ({
        key: item.dataKey,
        label: item.name,
        colorToken: item.colorToken,
      })),
    [series],
  );

  return (
    <div className="min-w-0" style={{ height: CHART_HEIGHT }}>
      <LineChartPreview
        data={data}
        legendItems={legendItems}
        showLegend={false}
        showXAxis
        showYAxis
        showGrid
        showDots={false}
        curve="linear"
        strokeWidth={1.2}
        height={CHART_HEIGHT}
        yAxisDomainMode="data-range"
        yAxisTickCount={6}
        yAxisWidth={44}
        yAxisTickAlign="left"
        margin={{ top: 20, right: 8, left: 0, bottom: 14 }}
      />
    </div>
  );
}
