import { CSSProperties, FC, ReactNode } from "react";
import Icon from "@ant-design/icons";
import { ReactComponent as backIcon } from "@/assets/icons/back.svg";
import { useNavigate } from "react-router-dom";
import "./index.scss";

export interface PageContainerProps {
  title: string;
  showBack?: boolean;
  style?: CSSProperties;
  headerSlot?: ReactNode;
  children?: ReactNode;
}

export const PageContainer: FC<PageContainerProps> = ({
  title,
  style,
  headerSlot,
  children,
  showBack,
}) => {
  const navigate = useNavigate();

  const handleBack = () => {
    if (window.history.state && window.history.state.idx > 0) {
      navigate(-1);
    } else {
      navigate("/management/index");
    }
  };

  return (
    <div className="page-container" style={style}>
      <div className="page-container-header">
        <div className="page-container-header__left">
          {showBack && (
            <Icon
              component={backIcon}
              style={{
                color: "#4284FF",
                fontSize: 24,
                cursor: "pointer",
              }}
              onClick={handleBack}
            />
          )}

          <h3>{title}</h3>
        </div>

        {headerSlot}
      </div>
      <div className="page-container-main">{children}</div>
    </div>
  );
};
