import React from 'react';
import { Box } from '@wix/design-system';
import { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';
import { SetupWidgetStepStatus } from '@wix/bex-core';

/**
 * Leading status indicator for a step. Mirrors the existing Setup widget:
 * green check when completed, muted dot when disabled, blue dot otherwise.
 */
export const SetupStepIcon = ({
  status,
  /**
   * Top nudge that centers the 18px icon on a single line of text. Defaults to
   * the desktop value; the mobile card centers the icon via its own wrapper and
   * passes "0px" to drop the nudge.
   */
  marginTop = '3px',
}: {
  status: SetupWidgetStepStatus;
  marginTop?: string;
}) => {
  if (status === 'completed') {
    return (
      <Box marginTop={marginTop}>
        <ConfirmSmall width="18px" height="18px" color="var(--wsr-color-G20)" />
      </Box>
    );
  }

  const color =
    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';

  return (
    <Box marginTop={marginTop}>
      <CircleSmallFilledSmall width="18px" height="18px" color={color} />
    </Box>
  );
};