import React from 'react';
import AreaBarList, { AreaBarItem } from '@/components/V2504/AreaBarList';
import styles from './index.less';
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';

interface PowerPlantItem {
  name: string;
  percentage: number;
  count: number;
  deviceId?: string;
}

const PowerPlantDisposal: React.FC = () => {
  const { dispatch } = useGlobalModalServices();
  // Mock data for the environmental power plants
  const mockData: PowerPlantItem[] = [
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270652' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270653' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270654' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270655' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270656' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270657' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270658' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270659' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270660' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270661' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270662' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270663' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270661' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270662' },
    { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270663' },
  ];

  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs 
        title="环保发电厂处置量"
      />
      <div className={styles.listWrapper}>
        <AreaBarList 
          data={mockData} 
          showCount={true}
          showPercentage={false}
          height={754}
          progressColor={{ from: 'rgb(0, 185, 255)', to: 'rgb(121, 255, 209)' }}
          unit="次"
          onClick={() => {
            dispatch.push('RubbishFacilitiesDetails')
          }}
        />
      </div>
    </div>
  );
};

export default PowerPlantDisposal; 