import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { useEmotionCss } from "@ant-design/use-emotion-css";
import { Tooltip } from "antd";

const MenuFooter: React.FC<{ collapsed: boolean; onClick: () => void; }> = ({ collapsed, onClick }) => {
    const className = useEmotionCss(({ token }) => {
        return {
            paddingInline: token.paddingXS,
            paddingBlock: token.paddingXS,
            marginTop: token.marginXS,
            marginBottom: -token.marginXS,
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: token.borderRadius,
            cursor: 'pointer',
            ':hover': {
                backgroundColor: token.colorBgContainer,
            },
            '.menu-footer-text': {
                paddingLeft: token.paddingXS,
            },
        };
    });
    return (
        <Tooltip
            placement="right"
            title={collapsed ? null : '展开菜单'}
        >
            <div onClick={onClick} className={className}>
                {collapsed ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
                {collapsed && <span className="menu-footer-text">收起菜单</span>}
            </div>
        </Tooltip>
    );
}

export default MenuFooter;