import React, { useState } from 'react';
import styles from './EmergencyResource.less';
import Yjzbry from './secondary_menu/yjzbry';
import Yjwz from './secondary_menu/yjwz';
import Yjdw from './secondary_menu/yjdw';
import Yjzj from './secondary_menu/yjzj';
import Yjssd from './secondary_menu/yjssd';
import Yjxfd from './secondary_menu/yjxfd';
import Zbhy from './secondary_menu/zbhy';

const EmergencyResource = () => {
    const [activeButton, setActiveButton] = useState('应急值班人员');

    const handleButtonClick = (buttonName) => {
        setActiveButton(buttonName);
    };

    const buttonList = [
        '应急值班人员',
        '应急物资',
        '应急队伍',
        '应急专家',
        '应急疏散点',
        '应急消防点',
        '周边医院'
    ];

    const renderContent = () => {
        switch (activeButton) {
            case '应急值班人员':
                return <Yjzbry />;
            case '应急物资':
                return <Yjwz />;
            case '应急队伍':
                return <Yjdw />;
            case '应急专家':
                return <Yjzj />;
            case '应急疏散点':
                return <Yjssd />;
            case '应急消防点':
                return <Yjxfd />;
            case '周边医院':
                return <Zbhy />;
            default:
                return <Yjzbry />;
        }
    };

    return (
        <div className={styles.container}>
            <div className={styles.buttonRow}>
                {buttonList.map((buttonName) => (
                    <div
                        key={buttonName}
                        className={`${styles.button} ${activeButton === buttonName ? styles.active : ''}`}
                        onClick={() => handleButtonClick(buttonName)}
                    >
                        {buttonName}
                    </div>
                ))}
            </div>
            <div className={styles.contentArea}>
                {renderContent()}
            </div>
        </div>
    );
};

export default EmergencyResource;
