import './menu-with-bottom-button.css'
import { IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
import serveImg from '../../static/left/serves.png'
// import newImg from '../../static/left/new.png'
// import {
//     RightOutlined
// } from '@ant-design/icons';
export default function MenuWithTopButton(props: IMenuWithTopButton) {


    const list = props.list.map((item, index) => (
        // 创建项目下三个选项
        <li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
            props.handleListItem(e, index, item);
        }}>

            {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
            <span className="menu-name">{item.name}</span>
            {/* <span className='icon'><RightOutlined /></span> */}
        </li>
    ));

    return (
        <div className="menu-with-bot-button">
            {/* button 是三个黄色按钮 */}
            <div className='bot'  onClick={(e) => {
                    props.button.handle(e);

                }}>
                <div className='bot-lift'>
                    <img src={serveImg} alt="" />
                    <div> {props.button.name}</div>
                </div>
                {/* <div className='bot-right' onClick={(e) => {
                    props.button.handle(e);

                }}>
                    <img src={newImg} alt="" />
                    <div>创建</div>
                </div> */}
            </div>
            {/* <button className="btn btn-orange top-button"
                    onClick={(e) => {
                        props.button.handle(e);
                        console.log(e);
                        
                    }}
            >
                {props.button.name}
            </button> */}
            <ul>{list}</ul>
        </div>
    )
}