import React from 'react';
import SmoothLineChart from '@/components/V2504/SmoothLineChart';
import styles from './index.less';
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';

interface TrendData {
  time: string;
  value: number;
}

const DisposalTrend: React.FC = () => {
  // Mock data for the chart
  const mockData: TrendData[] = [
    { time: '1月1日', value: 145 },
    { time: '1月2日', value: 160 },
    { time: '1月3日', value: 155 },
    { time: '1月4日', value: 165 },
    { time: '1月5日', value: 175 },
    { time: '1月6日', value: 185 },
    { time: '1月7日', value: 180 },
    { time: '1月8日', value: 190 },
    { time: '1月9日', value: 195 },
    { time: '1月10日', value: 205 },
    { time: '1月11日', value: 210 },
    { time: '1月12日', value: 215 },
    { time: '1月13日', value: 220 },
    { time: '1月14日', value: 210 },
    { time: '1月15日', value: 205 },
    { time: '1月16日', value: 195 },
    { time: '1月17日', value: 200 },
    { time: '1月18日', value: 205 },
    { time: '1月19日', value: 210 },
    { time: '1月20日', value: 215 },
    { time: '1月21日', value: 225 },
    { time: '1月22日', value: 230 },
    { time: '1月23日', value: 235 },
    { time: '1月24日', value: 240 },
    { time: '1月25日', value: 245 },
    { time: '1月26日', value: 250 },
    { time: '1月27日', value: 255 },
    { time: '1月28日', value: 250 },
    { time: '1月29日', value: 245 },
    { time: '1月30日', value: 240 },
    { time: '1月31日', value: 235 },
  ];

  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs 
        title="处置趋势"
      />
      <div className={styles.chartWrapper}>
        {/* <SmoothLineChart 
          data={mockData}
          xField="time"
          yField="value"
          areaColors={['rgba(40, 170, 255, 0.2)', 'rgba(40, 170, 255, 0)']}
          lineColors={['#28AAFF', '#28AAFF']}
          yAxisLabel="吨/日"
          height={150}
        /> */}
        <SmoothLineChart
          data={mockData}
          unitText="单位：万吨"
          lineColor="rgb(32, 214, 201)"
          lineColorStop1="rgba(32, 214, 201, 0.36)"
          lineColorStop2="rgba(32, 214, 201, 0)"
          // lineColor="rgb(136, 238, 248)"
          // lineColorStop1="rgba(136, 238, 248, 0)"
          // lineColorStop2="rgba(136, 238, 248, 0.36)"
          // showUnitText={false}
          // lineColor='rgb(32, 214, 201)'
          // lineColorStop1="rgba(255, 100, 89, 0)"
          // lineColorStop2="rgba(255, 100, 89, 0.36)"
          style={{ height: '180px', width: '100%' }}
          // loading={loadingTrend}
        />
      </div>
    </div>
  );
};

export default DisposalTrend; 