// 主机监控 — 进程监控 Tab (进程TOP表 + FD卡片 + CTX/IRQ卡片)
import type { RefObject } from 'react';
import type { AggType, BucketPoint } from '../types';
import type { JsonData } from '@/types/common';
import { ProcessTable } from './ProcessTable';
import { FDUsageCard } from './FDUsageCard';
import { ContextSwitchCard } from './ContextSwitchCard';
import type { ZoomableChartHandle } from '../ZoomableAreaChart';

export interface ProcessTabProps {
  processTop: JsonData[];
  fdInfo: JsonData;
  csInfo: JsonData;
  fdMetrics: BucketPoint[];
  aggType: AggType;
  fdChartRef: RefObject<ZoomableChartHandle | null>;
  fdChartZoomed: boolean;
  setFdChartZoomed: (v: boolean) => void;
}

export function ProcessTab(props: ProcessTabProps) {
  const { processTop, fdInfo, csInfo, fdMetrics, aggType, fdChartRef, fdChartZoomed, setFdChartZoomed } = props;
  return (
    <div className="space-y-3">
      <ProcessTable processTop={processTop} />
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <FDUsageCard
          fdInfo={fdInfo}
          fdMetrics={fdMetrics}
          aggType={aggType}
          fdChartRef={fdChartRef}
          fdChartZoomed={fdChartZoomed}
          setFdChartZoomed={setFdChartZoomed}
        />
        <ContextSwitchCard csInfo={csInfo} />
      </div>
    </div>
  );
}