import React from "react";
import "./KeyboardShortcuts.styles.scss";
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";

export const AllSetBox = ({ setShowAllSetBoxState, onCloseAllSetBox}) => {
  const onClose = () => {
    onCloseAllSetBox?.();
  };

  return (
    <div className="all-set-box-wrapper">
      <div className="close-icon-container" onClick={onClose}>
        <CloseRoundedIcon fontSize="small" sx={{ color: "#60697D" }} />
      </div>
      <div className="all-set-box-content">
        <div className="all-set-box-content-title-container">
          <span className="all-set-box-content-title"> You're All Set! </span>
          <iframe
            src="https://lottie.host/embed/80299b46-0a77-4568-ad18-d6cd9f735d6c/6aSfdN3qx6.lottie"
            className="all-set-box-content-animation"
          ></iframe>
        </div>
        <span className="all-set-box-content-description">
          {" "}
          Keyboard shortcuts are now at your fingertips. Enjoy a faster,
          smoother workflow.
        </span>
      </div>
    </div>
  );
};
