import React from "react";
import { Grid, Column, Stack } from "@carbon/react";
import { C3Tabs } from "./c3-tabs/c3-tabs";
import { C3Breadcrumb } from "./c3-breadcrumb/c3-breadcrumb";
import { DefaultStyleWrapper } from "../styles";
const gridStyles = { paddingRight: 0, paddingLeft: 0 };
const gridColumnStyles = { marginInline: 0 };
const C3Page = ({ header, tabs, children, isLoading = false, breadcrumbs = { elements: [] }, }) => {
    return (React.createElement(DefaultStyleWrapper, null,
        React.createElement(Grid, { style: gridStyles },
            React.createElement(Column, { span: 16, style: gridColumnStyles },
                React.createElement(Stack, { orientation: "vertical", gap: 7 },
                    (breadcrumbs.elements?.length || header) && (React.createElement(C3Breadcrumb, { ...breadcrumbs, title: header?.title, menu: header?.menuItems, tag: header?.tag, loading: isLoading })),
                    tabs && (React.createElement(Stack, { orientation: "vertical", gap: 5 },
                        React.createElement(C3Tabs, { tabs: tabs.list, desiredTabId: tabs?.activeTabId, onTabChange: tabs?.onChange, loading: isLoading }))),
                    children)))));
};
export { C3Page };
