import React, { useState, useEffect } from 'react';
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';
import SmoothLineChart from '@/components/V2504/SmoothLineChart';
import styles from './index.less';

interface AlertTrendProps {
  data?: { time: string; value: number }[];
  dateType?: string;
}

const AlertTrend: React.FC<AlertTrendProps> = ({ 
  data,
  dateType = 'month' 
}) => {
  const [trendData, setTrendData] = useState<{ time: string; value: number }[]>(data || []);

  // 当传入的数据变化时更新展示数据
  useEffect(() => {
    if (data && data.length > 0) {
      setTrendData(data);
    }
  }, [data]);

  return (
    <div className={styles.alertTrendSection}>
      <ModuleTitleWithTabs title="告警趋势" />
      <div className={styles.alertTrendContent}>
        <SmoothLineChart 
          data={trendData} 
          unitText="单位：次"
          lineColor="rgb(255, 100, 89)"
          lineColorStop2="rgba(255, 100, 89, 0)"
          lineColorStop1="rgba(255, 100, 89, 0.36)"
          // lineColorStop1="rgba(255, 100, 89, 0)"
          // lineColorStop2="rgba(255, 100, 89, 0.36)"
          style={{ height: '156px', width: '100%' }}
        />
      </div>
    </div>
  );
};

export default AlertTrend; 