/*!
 * 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 { memo } from 'react';
import { Container, Details, Index, Verb as VerbContainer } from './StepHeader.styles.js';
import { deriveDetails } from './StepHeader.utils.js';
export const StepHeader = /*#__PURE__*/ memo(function StepHeader({ step , index , styles ,  }) {
    const columns = deriveDetails(step);
    return /*#__PURE__*/ _jsxs(Container, {
        style: styles?.root,
        children: [
            /*#__PURE__*/ _jsxs(Index, {
                style: styles?.index,
                children: [
                    "#",
                    index + 1
                ]
            }),
            /*#__PURE__*/ _jsx(VerbContainer, {
                style: styles?.verb,
                children: step.verb
            }),
            /*#__PURE__*/ _jsx(Details, {
                style: styles?.details,
                children: columns
            })
        ]
    });
});
