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';

const DisposalFacilities: React.FC = () => {
  // Mock data for facilities
  const mockData: AreaBarItem[] = [
    { name: '填埋场', count: 123, percentage: 100 },
    { name: '环保发电厂', count: 120, percentage: 90 },
    { name: '渗滤液厂', count: 110, percentage: 80 },
    { name: '沼气发电厂', count: 103, percentage: 70 },
    { name: '焚烧厂', count: 100, percentage: 60 },
  ];

  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs 
        title="处置设施"
      />
      <div className={styles.listWrapper}>
        <AreaBarList 
          data={mockData} 
          showPercentage={false}
          unit="个"
          height={290}
          progressColor={{ from: 'rgb(255, 204, 122)', to: 'rgb(255, 148, 148)' }}
          valueStyle={{ color: 'rgb(89, 238, 255)' }}
          // isThinProgress={false}
        />
      </div>
    </div>
  );
};

export default DisposalFacilities; 