import { Row, Col, Card, Grid } from "antd";
import Mcard from "./mcard";
import Mtable from "./mtable";
const { useBreakpoint } = Grid;

export default (props) => {
  const screens = useBreakpoint();

  return (
    <div className="diycard">
      {screens.xs ? (
        <div
          style={{ display: "flex", flexDirection: "column", height: "100%" }}
        >
          {props.children && (
            <div style={{ marginBottom: 12 }}>{props.children}</div>
          )}
          <div>
            <Mcard {...props} />
          </div>
        </div>
      ) : props.withCard === false ? (
        <div style={{ display: "flex", width: "100%" }}>
          {(props.childposition == "left" || !props.childposition) &&
              props.children}
          <div style={{ flex: 1, width: "100%" }}>
            {props.childposition == "top" && props.children}
            <Mtable {...props} />
          </div>
          {(props.childposition == "right" || !props.childposition) &&
            props.children}
        </div>
      ) : (
        <Card
          bordered={props.bordered === false ? false : true}
          style={{ height: "100%" }}
          title={props.pagetitle || null}
          extra={props.pageextra || null}
          activeTabKey={props.activeTabKey}
          tabList={props.tabList}
          onTabChange={props.onTabChange}
        >
          <div style={{ display: "flex", width: "100%" }}>
            {(props.childposition == "left" || !props.childposition) &&
              props.children}
            <div style={{ flex: 1, width: "100%" }}>
              {props.childposition == "top" && props.children}
              <Mtable {...props} />
            </div>
            {(props.childposition == "right" || !props.childposition) &&
              props.children}
          </div>
        </Card>
      )}
    </div>
  );
};