import { useContext } from "react";
import { AppContext } from "../../Hooks/useContext/appContext";
import { Steps } from "../../Constants/Copy/howToSteps.js";

import "../../styles/howTo-page.scss";
import { ReactComponent as HowToInfoSvg } from "../../Assets/svg/howToInfo.svg";

const HowToPage = () => {
  const { appState } = useContext(AppContext);
  const { group } = appState;

  if (!group) return null;

  return (
    <>
      <div className="how-to-info-container">
        <div className="how-to-info-wrapper">
          <div className="how-to-image-wrapper">
            <HowToInfoSvg className="how-to-info-svg" />
          </div>
        </div>
        <div className="how-to-steps-container">
          <Steps />
        </div>
      </div>
    </>
  );
};

export default HowToPage;
