import React, { useState } from 'react';
import { Button } from 'antd';
import styles from './EnvironmentalActivities.less';
import ActivityCalendar from './components/ActivityCalendar';
import ActivityManagement from './components/ActivityManagement';
import EventReport from './components/EventReport';
import StatisticsAnalysis from './components/StatisticsAnalysis';

const EnvironmentalActivities = () => {
    const [activeModule, setActiveModule] = useState('1');

    const renderModule = () => {
        switch (activeModule) {
            case '1':
                return <ActivityCalendar />;
            case '2':
                return <ActivityManagement />;
            case '3':
                return <EventReport />;
            case '4':
                return <StatisticsAnalysis />;
            default:
                return <ActivityCalendar />;
        }
    };

    return (
        <div className={styles.container}>
            <div className={styles.TopButton}>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === '1' ? styles.active : ''}`}
                    onClick={() => setActiveModule('1')}
                >
                    活动日历
                </Button>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === '2' ? styles.active : ''}`}
                    onClick={() => setActiveModule('2')}
                >
                    活动管理
                </Button>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === '3' ? styles.active : ''}`}
                    onClick={() => setActiveModule('3')}
                >
                    事件上报
                </Button>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === '4' ? styles.active : ''}`}
                    onClick={() => setActiveModule('4')}
                >
                    统计分析
                </Button>
            </div>
            <div className={styles.content}>
                {renderModule()}
            </div>
        </div>
    );
};

export default EnvironmentalActivities;
