/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { IconButton, useTheme } from '@fluentui/react';
import { memo } from 'react';
import { HistoryIcon } from './CustomIcons.js';
import { Aside, AsideHeader, icons, Title, WorkflowContainer } from './HistoryPanel.styles.js';
export const HistoryPanel = /*#__PURE__*/ memo(function HistoryPanel({ isCollapsed , toggleCollapsed , title ='History' , showStepCount , steps , titleStyle , children ,  }) {
    const theme = useTheme();
    return /*#__PURE__*/ _jsxs(Aside, {
        isCollapsed: isCollapsed,
        children: [
            /*#__PURE__*/ _jsxs(AsideHeader, {
                isCollapsed: isCollapsed,
                children: [
                    /*#__PURE__*/ _jsx(HistoryIcon, {
                        color: theme.palette.themePrimary
                    }),
                    /*#__PURE__*/ _jsxs(Title, {
                        style: titleStyle,
                        isCollapsed: isCollapsed,
                        children: [
                            title,
                            " ",
                            showStepCount ? `(${steps?.length})` : null,
                            /*#__PURE__*/ _jsx(IconButton, {
                                iconProps: icons.cancel,
                                onClick: toggleCollapsed,
                                ariaLabel: "Close"
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(WorkflowContainer, {
                isCollapsed: isCollapsed,
                children: children
            })
        ]
    });
});
