"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Content = styled_components_1.default.div `
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: ${(props) => (props.withoutBreadcrumb ? '0 24px' : '24px')};
  overflow: hidden auto;
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 24px;
  }
`;
const Breadcrumb = styled_components_1.default.div `
  padding: 12px 0;
`;
const Container = styled_components_1.default.div `
  display: inline-table;
  width: 100%;
  height: ${(props) => props.withoutBreadcrumb ? 'calc(100% - 48px - 24px)' : '100%'};
  padding: 24px;
  background-color: #fff;
`;
const FoxPageContent = (props) => {
    const { breadcrumb, children, style } = props;
    return (react_1.default.createElement(Content, { withoutBreadcrumb: !!breadcrumb, style: style },
        breadcrumb && react_1.default.createElement(Breadcrumb, null, breadcrumb),
        react_1.default.createElement(Container, { withoutBreadcrumb: !!breadcrumb }, children)));
};
exports.default = FoxPageContent;
