/**
 * @param {number} buttonWidth
 * @param {number} containerWidth
 * @returns {number} offsetValue
 * @description
 * used to calculate the offset in positions of the initial and final list items
 */
export function offsetToPositionCenter(
  buttonWidth: number,
  containerWidth: number,
): number;

/**
 *
 * @param {number} activeIndex
 * @param {number} currentIndex
 * @returns {number} opacity
 * @description
 * used to calculate opacity value of list item based on a
 * comparison between active index in the list
 * and current index of given item
 */
export function opacityFactor(
  activeIndex: number,
  currentIndex: number,
): number;

type CopilotCameraStepHook = {
  steps: Step[];
  activeStep?: Step | undefined;
  setActiveStep: (index: number) => void;
  activeStepIndex: number;
  disableSlotUpdateReflection?: boolean;
};

type StepListOptionalProps = {
  freeflow?: boolean;
};

/**
 * @component
 * Represents a stepList component instance
 * displays the list of available steps
 * and lets the user change the step
 * using a "slide" gesture or a "press"
 * of the step button
 * @description
 * works on redux based state value to
 * display the "list of steps", "active step" and "completed steps"
 * and provides touch based UI feedback
 * while handling change to the active step index
 * @returns {JSX.Element}
 */
export default function StepList(
  props: CopilotCameraStepHook & StepListOptionalProps,
): JSX.Element;