import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Grid } from '@workday/canvas-kit-react/layout';
import { Heading } from '@workday/canvas-kit-react/text';
import { createStencil, createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const gridLayoutStyles = createStyles({
    gridTemplateAreas: "'Header Header Header Header' 'SideBar BodyContent BodyContent BodyContent' 'Footer Footer Footer Footer'",
    gridGap: system.gap.md,
    gridTemplateColumns: '3fr 9fr',
    gridTemplateRows: `auto ${px2rem(300)} auto`,
});
const regionStencil = createStencil({
    vars: {
        gridArea: '',
    },
    base: ({ gridArea }) => ({
        border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
        borderRadius: system.shape.md,
        padding: system.padding.md,
        gridArea,
    }),
});
const headingStyles = createStyles({
    margin: '0',
});
export const LandmarkRegions = () => {
    return (_jsxs(Grid, { cs: gridLayoutStyles, children: [_jsx(Grid, { as: "header", cs: regionStencil({ gridArea: 'Header' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Header" }) }), _jsx(Grid, { as: "nav", cs: regionStencil({ gridArea: 'SideBar' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Navigation" }) }), _jsx(Grid, { as: "main", cs: regionStencil({ gridArea: 'BodyContent' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Main Content" }) }), _jsx(Grid, { as: "footer", cs: regionStencil({ gridArea: 'Footer' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Footer" }) })] }));
};
