import React, { useLayoutEffect, useRef } from "react";
import CssFlex from "../../../ui/CssFlex";
import Image from "../../../ui/Image";
import Typography from "../../../ui/Typography";
import GreenCheck from "../assets/GreenCheck";
import getClasses from "../styles";

var PMAXIntroCards = function PMAXIntroCards(_ref) {
  var translations = _ref.translations,
      step = _ref.step,
      images = _ref.images;
  var classes = getClasses();
  var ref = useRef(null);
  useLayoutEffect(function () {
    ref.current.style.transition = "transform 0.2s ease-in-out";
    ref.current.style.transform = "translateX(-".concat(step, "00%)");
  }, [step]);
  return (
    /*#__PURE__*/

    /* @ts-ignore */
    React.createElement("div", {
      className: classes.frame
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.boxContainer,
      ref: ref
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.box
    }, step === 0 &&
    /*#__PURE__*/

    /* @ts-ignore */
    React.createElement(CssFlex, {
      direction: "column",
      gap: "sm",
      alignItems: "center",
      justifyContent: "center"
    }, /*#__PURE__*/React.createElement(Image, {
      src: images.step_1.src,
      size: images.step_1.size
      /* @ts-ignore */
      ,
      className: classes.image
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "title2",
      shade: 800,
      align: "center"
    }, translations.step_1.title), /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph",
      align: "center"
    }, translations.step_1.description))), /*#__PURE__*/React.createElement("div", {
      className: classes.box
    }, step === 1 &&
    /*#__PURE__*/

    /* @ts-ignore */
    React.createElement(CssFlex, {
      direction: "column",
      gap: "md",
      alignItems: "center",
      justifyContent: "center"
    }, /*#__PURE__*/React.createElement(Image, {
      src: images.step_2.src,
      size: images.step_2.size
      /* @ts-ignore */
      ,
      className: classes.image
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "title2",
      shade: 800,
      align: "center"
    }, translations.step_2.title), /*#__PURE__*/React.createElement(CssFlex, {
      alignItems: "center",
      gap: "md",
      mx: "xl"
    }, /*#__PURE__*/React.createElement(GreenCheck, {
      style: {
        flexShrink: 0
      }
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph"
    }, translations.step_2.bullet_1)), /*#__PURE__*/React.createElement(CssFlex, {
      alignItems: "center",
      gap: "md",
      mx: "xl"
    }, /*#__PURE__*/React.createElement(GreenCheck, {
      style: {
        flexShrink: 0
      }
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph"
    }, translations.step_2.bullet_2)), /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph",
      align: "center"
    }, translations.step_2.description))), /*#__PURE__*/React.createElement("div", {
      className: classes.box
    }, step === 2 &&
    /*#__PURE__*/

    /* @ts-ignore */
    React.createElement(CssFlex, {
      direction: "column",
      gap: "md",
      alignItems: "center",
      justifyContent: "center"
    }, /*#__PURE__*/React.createElement(Image, {
      src: images.step_3.src,
      size: images.step_3.size
      /* @ts-ignore */
      ,
      className: classes.image
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "title2",
      shade: 800,
      align: "center"
    }, translations.step_3.title), /*#__PURE__*/React.createElement(CssFlex, {
      alignItems: "center",
      gap: "md",
      mx: "xl"
    }, /*#__PURE__*/React.createElement(GreenCheck, {
      style: {
        flexShrink: 0
      }
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph"
    }, translations.step_3.bullet_1)), /*#__PURE__*/React.createElement(CssFlex, {
      alignItems: "center",
      gap: "md",
      mx: "xl"
    }, /*#__PURE__*/React.createElement(GreenCheck, {
      style: {
        flexShrink: 0
      }
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph"
    }, translations.step_3.bullet_2)), /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph",
      align: "center"
    }, translations.step_3.description))), /*#__PURE__*/React.createElement("div", {
      className: classes.box
    }, step === 3 &&
    /*#__PURE__*/

    /* @ts-ignore */
    React.createElement(CssFlex, {
      direction: "column",
      gap: "sm",
      alignItems: "center",
      justifyContent: "center"
    }, /*#__PURE__*/React.createElement(Image, {
      src: images.step_4.src,
      size: images.step_4.size
      /* @ts-ignore */
      ,
      className: classes.image
    }), /*#__PURE__*/React.createElement(Typography, {
      variant: "title2",
      shade: 800,
      align: "center"
    }, translations.step_4.title), /*#__PURE__*/React.createElement(Typography, {
      variant: "paragraph",
      align: "center"
    }, translations.step_4.description)))))
  );
};

export default PMAXIntroCards;