import { jsx, jsxs } from "react/jsx-runtime";
import { Row } from "../../layouts/index.js";
import { Button } from "@uipath/apollo-wind";
import { memo } from "react";
import { CanvasIcon } from "../../utils/icon-registry.js";
const Header_Header = /*#__PURE__*/ memo(function({ title, onBack, showBackButton }) {
    const isBackButtonVisible = showBackButton && onBack;
    return /*#__PURE__*/ jsxs(Row, {
        h: 32,
        align: "center",
        children: [
            /*#__PURE__*/ jsx("div", {
                style: {
                    width: isBackButtonVisible ? '32px' : '0px',
                    opacity: isBackButtonVisible ? 1 : 0,
                    transform: isBackButtonVisible ? 'translateX(0)' : 'translateX(20px)',
                    marginRight: isBackButtonVisible ? '8px' : '0px',
                    transition: 'width 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                    overflow: 'hidden'
                },
                children: isBackButtonVisible && /*#__PURE__*/ jsx(Button, {
                    variant: "ghost",
                    size: "icon",
                    className: "h-8 w-8",
                    "aria-label": "Back",
                    onClick: onBack,
                    style: {
                        transition: 'transform 0.3s ease-in-out'
                    },
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "chevron-left",
                        size: 20
                    })
                })
            }),
            /*#__PURE__*/ jsx("span", {
                className: "text-base font-bold",
                style: {
                    transition: 'transform 0.3s ease-in-out, margin 0.3s ease-in-out',
                    margin: 0
                },
                children: title
            })
        ]
    });
});
export { Header_Header as Header };
