import React, { useState } from 'react';
import { Button } from 'antd';
import styles from './FireWarning.less';
import RealtimeMonitoring from './components/RealtimeMonitoring';
import DataAnalysisWarning from './components/DataAnalysisWarning';

const Firewarning = () => {
    const [activeModule, setActiveModule] = useState('realtime');

    const handleModuleClick = (module) => {
        setActiveModule(module);
    };

    const renderModule = () => {
        switch (activeModule) {
            case 'realtime':
                return <RealtimeMonitoring />;
            case 'analysis':
                return <DataAnalysisWarning />;
            default:
                return <RealtimeMonitoring />;
        }
    };

    return (
        <div className={styles.firewarningContainer}>
            <div className={styles.firewarningTopButton}>
                <Button
                    className={`${styles.firewarningTopButtonItem} ${activeModule === "realtime" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("realtime")}
                >
                    实时状态监测
                </Button>
                <Button
                    className={`${styles.firewarningTopButtonItem} ${activeModule === "analysis" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("analysis")}
                >
                    数据分析与预警
                </Button>
            </div>
            <div className={styles.firewarningContent}>
                {renderModule()}
            </div>
        </div>
    );
};

export default Firewarning;
