import { governanceData } from './mockData';
import styles from './index.less';
import DataActivityCard from './components/DataActivityCard';
import DataQualityCard from './components/DataQualityCard';
import CenterStats from './components/CenterStats';
import DataFlowSection from './components/DataFlowSection';
import Modal from '@/components/HncyModal';

interface DataGovernanceProps {
  open: boolean;
  onCancel: () => void;
}

const DataGovernance = ({ open, onCancel }: DataGovernanceProps) => {
  return (
    <Modal
      title="城管数据治理概况"
      open={open}
      footer={null}
      onCancel={onCancel}
      width={1920}
    >
      <div className={styles.container}>
        <div className={styles.leftSection}>
          <DataActivityCard data={governanceData.uiData.dataActivity} />
          <div className={styles.flowSection}>
            <DataFlowSection 
              sourceData={governanceData.sourceData}
              businessData={governanceData.businessData}
              baseInfoData={governanceData.baseInfoData}
              themeData={governanceData.themeData}
              specialData={governanceData.specialData}
            />
          </div>
        </div>

        <div className={styles.centerSection}>
          <CenterStats data={governanceData.centerStats} />
        </div>

        <div className={styles.rightSection}>
          <DataQualityCard data={governanceData.uiData.dataQuality} />
          <div className={styles.themeSection}>
            <div className={styles.themeData}>
              {/* Theme data visualization */}
            </div>
            <div className={styles.specialData}>
              {/* Special data visualization */}
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default DataGovernance; 