import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { PanelStyled, HeadingStyled, PanelContentStyled, ButtonSmallCSS, } from './panel.style';
export const Panel = ({ children, title, onDelete, extra, size = 'middle', className, }) => (_jsxs(PanelStyled, { size: size, className: className, children: [_jsxs(HeadingStyled, { size: size, contentless: !children, children: [extra, _jsx("span", { children: title }), onDelete ? (_jsxs(_Fragment, { children: [size === 'middle' ? (_jsx(Button, { icon: _jsx(DeleteOutlined, {}), size: "small", onClick: onDelete })) : null, size === 'small' ? (_jsx(Button, { css: ButtonSmallCSS, type: "text", icon: _jsx(DeleteOutlined, {}), size: "small", onClick: onDelete })) : null] })) : null] }), children ? (_jsx(PanelContentStyled, { size: size, children: children })) : null] }));
