import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './EmergencyPlan.less';
import HazardousChemicalsEnterprise from './components/HazardousChemicalsEnterprise'; //涉危化品企业
import HazardousChemicals from './components/HazardousChemicals'; //危化品
import AccidentCases from './components/AccidentCases'; //事故案例
import LawsAndRegulations from './components/LawsAndRegulations'; //法律法规
import FrameSvg from '@/assets/img/Frame.svg';
import Backg01Png from '@/assets/img/backg01.png';



const SafeMajorHazardList = () => {
    const [activeTab, setActiveTab] = useState('swhpqy');

    const handleTabChange = (key) => {
        setActiveTab(key);
    };

    const renderContent = () => {
        switch(activeTab) {
            case 'swhpqy':
                return <HazardousChemicalsEnterprise />;
            case 'whp':
                return <HazardousChemicals />;
            case 'sgla':
                return <AccidentCases />;
            case 'flfg':
                return <LawsAndRegulations />;
            default:
                return <HazardousChemicalsEnterprise />;
        }
    };


    return (
        <div className={styles.container1}>
            <div className={styles.TopButton}>
                <div className={styles.leftSection}>
                    <img src={FrameSvg} alt="Frame" className={styles.frameIcon} />
                    <span className={styles.titleText}>应急信息库</span>
                    <div className={styles.buttonGroup}>
                        <Button 
                            type="default"
                            onClick={() => handleTabChange('swhpqy')}
                            className={`${styles.tabButton} ${activeTab === 'swhpqy' ? styles.active : ''}`}
                        >
                            涉危化品企业
                        </Button>
                        <Button 
                            type="default"
                            onClick={() => handleTabChange('whp')}
                            className={`${styles.tabButton} ${activeTab === 'whp' ? styles.active : ''}`}
                        >
                            危化品
                        </Button>
                        <Button 
                            type="default"
                            onClick={() => handleTabChange('sgla')}
                            className={`${styles.tabButton} ${activeTab === 'sgla' ? styles.active : ''}`}
                        >
                            事故案例
                        </Button>
                        <Button 
                            type="default"
                            onClick={() => handleTabChange('flfg')}
                            className={`${styles.tabButton} ${activeTab === 'flfg' ? styles.active : ''}`}
                        >
                            法律法规
                        </Button>
                    </div>
                </div>
                
                <div className={styles.rightSection}>
                    <img src={Backg01Png} alt="Background" className={styles.backgroundImg} />
                </div>
            </div>
            <div className={styles.content}>
                {renderContent()}
            </div>
        </div>
    );
};

export default SafeMajorHazardList;
