import React, { useState } from 'react';
import styles from './EmergencyRescue.less';
import Jjjl from './secondary_menu/jjjl';
import Czjy from './secondary_menu/czjy';

const EmergencyRescue = () => {
    const [activeButton, setActiveButton] = useState('接警记录');

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

    const buttonList = [
        '接警记录',
        '处置救援'
    ];

    const renderContent = () => {
        switch (activeButton) {
            case '接警记录':
                return <Jjjl />;
            case '处置救援':
                return <Czjy />;
            default:
                return <Jjjl />;
        }
    };

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