import React from 'react';
import { Box, Heading, Text, LinearProgressBar } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface SetupWidgetHeaderProps {
  /** Defaults to the translated "Setup" when omitted. */
  title?: string | null;
  completedCount: number;
  totalCount: number;
  progressPercentage: number;
  isMobile: boolean;
}

/**
 * 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,
}: SetupWidgetHeaderProps) => {
  const { translate: t } = useWixPatternsContainer();
  const resolvedTitle = title ?? t('cairo.setupWidget.title');
  const ratioLabel = t('cairo.setupWidget.progress.label', {
    completed: completedCount,
    total: totalCount,
  });

  if (isMobile) {
    // Mobile (per Figma): the "X/Y" ratio sits inline to the left of the bar
    // (no "completed" word) to save vertical space. The ratio is just numbers,
    // so it needs no translation.
    const ratio = `${completedCount}/${totalCount}`;
    return (
      <Box direction="vertical" gap="SP3" width="100%">
        <Heading dataHook="setup-widget-title" size="large">
          {resolvedTitle}
        </Heading>
        <Box width="100%" verticalAlign="middle" gap="SP2">
          <Text dataHook="setup-widget-progress" size="small" secondary>
            {ratio}
          </Text>
          <Box flexGrow={1}>
            <LinearProgressBar skin="standard" value={progressPercentage} />
          </Box>
        </Box>
      </Box>
    );
  }

  return (
    <Box align="space-between" verticalAlign="middle" marginBottom="SP4">
      <Heading dataHook="setup-widget-title" size="medium">
        {resolvedTitle}
      </Heading>
      <Box gap="SP1" verticalAlign="middle">
        <Text dataHook="setup-widget-progress" size="tiny" weight="thin">
          {ratioLabel}
        </Text>
        <Box width={220} marginLeft="-8px">
          <LinearProgressBar skin="standard" value={progressPercentage} />
        </Box>
      </Box>
    </Box>
  );
};