/**
 * 财务概览 Tab
 */

import React from 'react';
import { VStack } from '@chakra-ui/react';
import { ComparisonAnalysis, FinancialMetricsTable } from '../components';
import type { FinancialMetricsData, ComparisonData } from '../types';

export interface OverviewTabProps {
  comparison: ComparisonData[];
  financialMetrics: FinancialMetricsData[];
  showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
  calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
  getCellBackground: (change: number, intensity: number) => string;
  positiveColor: string;
  negativeColor: string;
  bgColor: string;
  hoverBg: string;
}

const OverviewTab: React.FC<OverviewTabProps> = ({
  comparison,
  financialMetrics,
  showMetricChart,
  calculateYoYChange,
  getCellBackground,
  positiveColor,
  negativeColor,
  bgColor,
  hoverBg,
}) => {
  const tableProps = {
    showMetricChart,
    calculateYoYChange,
    getCellBackground,
    positiveColor,
    negativeColor,
    bgColor,
    hoverBg,
  };

  return (
    <VStack spacing={4} align="stretch">
      <ComparisonAnalysis comparison={comparison} />
      <FinancialMetricsTable data={financialMetrics} {...tableProps} />
    </VStack>
  );
};

export default OverviewTab;