import React from 'react';
import { Box, Heading, Text, LinearProgressBar } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
/**
 * Widget header: title + "X/Y completed" ratio + progress bar.
 * - Desktop: title left, ratio + bar inline on the right.
 * - Mobile: large heading stacked above the ratio and a full-width bar.
 */
export const SetupWidgetHeader = ({ title, completedCount, totalCount, progressPercentage, isMobile, }) => {
    const { translate: t } = useWixPatternsContainer();
    const resolvedTitle = title ?? t('cairo.setupWidget.title');
    const ratioLabel = t('cairo.setupWidget.progress.label', {
        completed: completedCount,
        total: totalCount,
    });
    if (isMobile) {
        return (React.createElement(Box, { direction: "vertical", gap: "SP2" },
            React.createElement(Heading, { dataHook: "setup-widget-title", size: "large" }, resolvedTitle),
            React.createElement(Text, { dataHook: "setup-widget-progress", size: "small", secondary: true }, ratioLabel),
            React.createElement(Box, { width: "100%" },
                React.createElement(LinearProgressBar, { skin: "standard", value: progressPercentage }))));
    }
    return (React.createElement(Box, { align: "space-between", verticalAlign: "middle", marginBottom: "SP4" },
        React.createElement(Heading, { dataHook: "setup-widget-title", size: "medium" }, resolvedTitle),
        React.createElement(Box, { gap: "SP1", verticalAlign: "middle" },
            React.createElement(Text, { dataHook: "setup-widget-progress", size: "tiny", weight: "thin" }, ratioLabel),
            React.createElement(Box, { width: 220, marginLeft: "-8px" },
                React.createElement(LinearProgressBar, { skin: "standard", value: progressPercentage })))));
};
//# sourceMappingURL=SetupWidgetHeader.js.map