// @flow strict

import * as React from 'react';

import {classify} from '../../../utils/classify';

import css from '../Stepper.module.css';


type ClassNames = $ReadOnly<{wrapper?: string}>;

export type StepContentProps = {
  children: React.Node,
  active?: boolean,
  completed?: boolean,
  disabled?: boolean,
  classNames?: ClassNames,
};

export const StepContent = ({
  children,
  classNames,
  active,
  completed = false,
  disabled = false,
}: StepContentProps): React.Node => (
  <div
    className={classify(
      css.stepContentWrapper,
      {
        [css.active]: active,
        [css.completed]: completed,
        [css.disabled]: disabled,
      },
      classNames?.wrapper,
    )}
  >
    {children}
  </div>
);