import React, { forwardRef } from "react";
import { cx } from "../../../../utils";
import { IconClose } from "../../../_Icon";
import { classes } from "../../Panel.tokens";
import { placements } from "./PanelHeader.types";
import { StyledHeader, ButtonWrapper, CloseIconWrapper } from "./PanelHeader.styles";
import { base as viewCSS } from "./variations/_view/base";
export const panelHeaderRoot = (Root)=>/*#__PURE__*/ forwardRef(({ children, actions, view, className, onClose, hasClose = 'true', closePlacement = 'right', ...rest }, outerRef)=>{
        const hasHeaderClass = children ? undefined : classes.hasHeader;
        const isRightCloseClass = closePlacement === placements.right ? classes.isRightClose : undefined;
        return /*#__PURE__*/ React.createElement(Root, {
            ref: outerRef,
            view: view,
            className: cx(className, hasHeaderClass, isRightCloseClass),
            ...rest
        }, children && /*#__PURE__*/ React.createElement(StyledHeader, null, children), actions && /*#__PURE__*/ React.createElement(ButtonWrapper, null, actions), hasClose && /*#__PURE__*/ React.createElement(ButtonWrapper, {
            placement: closePlacement
        }, /*#__PURE__*/ React.createElement(CloseIconWrapper, {
            view: "clear",
            size: "s",
            onClick: onClose,
            color: "inherit"
        }, /*#__PURE__*/ React.createElement(IconClose, {
            size: "s",
            color: "inherit"
        }))));
    });
export const panelHeaderConfig = {
    name: 'PanelHeader',
    tag: 'div',
    layout: panelHeaderRoot,
    base: '',
    variations: {
        view: {
            css: viewCSS
        }
    },
    defaults: {
        view: 'default'
    }
};
