const ActioncardTop = ({ allProps: {
    blueBackground,
    backgroundImg,
    heroText
    }
}) => {
  return (
    <div className="cardtop-container" style={{backgroundImage: `url(../../../public/images/${backgroundImg})`}}>
      <NwmHeader optionalBlueBkgrd={`${blueBackground}`} />
      <div className="hero-text">{`${heroText}`}</div>
    </div>
  );
};

const NwmHeader = (optionalBlueBkgrd) => (
  <div className={`${optionalBlueBkgrd} nwmHeader-div`}>
    <span className="nwm-header-text">Northwestern Mutual</span>
  </div>
);

const ActioncardBottom = ({ allPropsOne: {
  actionbottomContainer,
  userImg,
  headerText,
  bodyText,
  buttonColors,
  buttonText,
  buttonHeight,
  hideMe
  }
}) => {
  return (
    <div className={`${actionbottomContainer}`}>
      <div className="user-img" style={{backgroundImage: `url(../../../public/images/${userImg})`}} />
      <div className="actionbottom-header">{`${headerText}`}</div>
      <div className="bodytext-cardbottom">{`${bodyText}`}</div>
      <SitewideButton
        buttonColors={buttonColors}
        buttonText={buttonText}
        buttonHeight={buttonHeight} />
      {/* set hideMe to .no-show if bottom line not needed */}
      <div className={`footer-text ${hideMe}`}>
        <span>WHY FRIENDSHIP BRACELETS?</span>
        <span className="footer-text-chev">›</span>
      </div>
    </div>
  );
};