import { Button, Space } from "antd";
import HeaderBack from "../HeaderBack";

/**
 * 页面布局组件
 */
function Page(props) {
  const {
    headerTitle,
    history,
    isShowHeader = true,
    headerPrevious = true,
    isShowFooter = true,
    isShowAllAction = true,
    backButtonText = "关闭",
    contentPadding = "20px",
    customActionButtons,
    extraActionButtons,
  } = props;

  return (
    <div className="page">
      {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
      <div style={{ padding: contentPadding }}>
        {props.children}
      </div>
      {
        (isShowAllAction && isShowFooter) && (
          <div style={{ transform: 'scale(1)', margin: '0px -44px' }}>
            <div style={{ height: "52px" }}></div>
            <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: "100%" }}>
              {customActionButtons || (
                <Space>
                  {extraActionButtons}
                  <Button onClick={() => history?.goBack?.() || window.history.back()}>
                    {backButtonText}
                  </Button>
                </Space>
              )}
            </div>
          </div>
        )
      }
    </div>
  );
}

Page.displayName = "Page";

export default Page;