import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { DocumentCardActions } from '@fluentui/react';
import { memo, useMemo } from 'react';
import { selectStepDescription } from '../selectStepDescription.js';
import { useStepActions } from './StepCard.hooks.js';
import { Card, CardContent, styles } from './StepCard.styles.js';
export const StepCard = /*#__PURE__*/ memo(function StepCard({ step , index , output , onEdit , onDelete , onDuplicate , onSelect ,  }) {
    const Description = useMemo(()=>selectStepDescription(step), [
        step
    ]);
    const stepActions = useStepActions(step, index, onEdit, onDelete, onDuplicate, onSelect);
    return /*#__PURE__*/ _jsxs(Card, {
        styles: styles.card,
        children: [
            /*#__PURE__*/ _jsx(CardContent, {
                children: /*#__PURE__*/ _jsx(Description, {
                    step: step,
                    output: output,
                    showInput: true,
                    showOutput: true,
                    showOutputColumn: true
                })
            }),
            /*#__PURE__*/ _jsx(DocumentCardActions, {
                className: `step-card-${index}`,
                styles: styles.actions,
                actions: stepActions
            })
        ]
    });
});
