import * as React from 'react';
import { Box, Flex } from 'rebass';
import join from '../utils/join';
export const baseClassName = 'ab-Panel';
const Header = ({ children, variant = 'default', ...headerProps }) => {
    if (!children) {
        return null;
    }
    const style = {};
    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center", ...headerProps, style: { ...style, ...headerProps.style }, className: join(`${baseClassName}__header`, `${baseClassName}__header--variant-${variant}`) }, children));
};
const Body = ({ children, bodyScroll, variant, ...bodyProps }) => {
    if (!children) {
        return null;
    }
    if (bodyScroll === true) {
        bodyScroll = 'auto';
    }
    return (React.createElement(Box, { ...bodyProps, className: join(`${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `${baseClassName}__body--scroll-${bodyScroll}` : null) }, children));
};
const Panel = (props) => {
    const { borderRadius, border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
    const style = {};
    if (borderRadius !== undefined) {
        style['--ab-cmp-panel__border-radius'] =
            typeof borderRadius == 'number' ? `var(--ab-space-${borderRadius})` : borderRadius;
    }
    const headerStyle = {
        border,
        ...(headerProps ? headerProps.style : null),
    };
    const bodyStyle = {
        border,
        ...(bodyProps ? bodyProps.style : null),
    };
    return (React.createElement(Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: join(className, baseClassName, `${baseClassName}--variant-${variant}`, !header ? `${baseClassName}--no-header` : `${baseClassName}--with-header`) },
        React.createElement(Header, { ...headerProps, style: headerStyle, variant: variant }, header),
        React.createElement(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant }, children)));
};
export default Panel;
