'use client';

import { SeriesChart } from '@/components/charts/SeriesChart';
import type { IncidentDetail } from '@/lib/types';

export function IncidentSeriesChart({ series, timeline }: { series: IncidentDetail['series']; timeline: IncidentDetail['timeline'] }) {
  return (
    <SeriesChart
      lines={[
        { name: 'Incident scope', color: '#E76F51', points: series.points.map((p) => ({ ts: p.ts, value: p.pressure })), area: true, width: 1.5 },
        { name: 'Global pressure', color: '#8B98A5', points: series.points.map((p) => ({ ts: p.ts, value: p.global_pressure })), dashed: true },
      ]}
      height={260}
      markLines={timeline.map((t) => ({ ts: t.ts, label: t.status }))}
    />
  );
}