import CloseOutlined from "@mui/icons-material/CloseOutlined";
import Drawer from "@mui/material/Drawer";
import { IconButton } from "@/shared/ui/IconButton.jsx";

export function SideDrawer({
    actions,
    as: Component = "section",
    children,
    className = "",
    contentClassName = "",
    drawerProps = {},
    onClose,
    open,
    title,
    width = "default",
    ...props
}) {
    const drawerClassName = ["side-drawer", width === "wide" ? "side-drawer--wide" : "", className]
        .filter(Boolean)
        .join(" ");

    return (
        <Drawer anchor="right" open={open} onClose={onClose} {...drawerProps}>
            <Component className={drawerClassName} {...props}>
                <div className="side-drawer__header">
                    {title ? <h2 className="side-drawer__title">{title}</h2> : <span />}
                    {onClose ? (
                        <IconButton label="关闭" onClick={onClose}>
                            <CloseOutlined fontSize="small" />
                        </IconButton>
                    ) : null}
                </div>
                <div className={["side-drawer__body", contentClassName].filter(Boolean).join(" ")}>{children}</div>
                {actions ? <div className="side-drawer__actions">{actions}</div> : null}
            </Component>
        </Drawer>
    );
}