import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import './stepper-content.scss';

const componentName = 'StepperContent';


const propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.func
  ]),
  variant: PropTypes.string,
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object
  ]),
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  withBorder: PropTypes.bool,
  className: PropTypes.string
};

const defaultProps = {
  children: null,
  variant: 'primary',
  value: null,
  size: 'md',
  withBorder: false,
  className: undefined
};


const StepperContent = ({ children, variant, value, size, withBorder, className }) => (
  <div
    className={className}
    styleName={classNames(
      `stepper-content--${variant}`, `size-${size}`,
      { 'with-border': withBorder }
    )}
  >
    {typeof children === 'function' ? children(value) : children}
  </div>
);


StepperContent.componentName = componentName;
StepperContent.propTypes = propTypes;
StepperContent.defaultProps = defaultProps;

export default StepperContent;
