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,
}: {
  status: SetupWidgetStepStatus;
}) => {
  if (status === 'completed') {
    return (
      <Box marginTop="3px">
        <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="3px">
      <CircleSmallFilledSmall width="18px" height="18px" color={color} />
    </Box>
  );
};
