import { useTranslation } from "react-i18next";
import CursorIcon from "../../../../icons/CursorIcon";
import MouseIcon from "../../../../icons/MouseIcon";
import CrossButton from "../../../CrossButton";
import LookAroundButton from "./LookAroundButton";

type ThreeDTourHelpModalProps = {
  onClick: () => void;
  currentViewTitle: string;
};

const ThreeDTourHelpModal = ({
  onClick,
  currentViewTitle,
}: ThreeDTourHelpModalProps) => {
  const [t] = useTranslation();
  return (
    <div className="absolute h-screen w-screen bg-black bg-opacity-30 z-10 flex justify-center items-center select-none pointer-events-auto">
      <div className="w-[536px] min-h-[344px] bg-white rounded-[16px] flex flex-col py-8 px-10">
        <div className="flex justify-between">
          <div className="text-[#858585] text-xl font-bold">
            {currentViewTitle}
          </div>
          <CrossButton onClick={onClick} />
        </div>
        <div className="flex flex-col gap-4 pb-8">
          <h2 className="text-[#333] text-[32px] font-bold">
            {t("ControlHelp")}
          </h2>
          <div className="flex gap-4 items-center">
            <div className="w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
              <MouseIcon />{" "}
            </div>
            <div>{t("ClickAndHoldTheLeftMouseButtonToLookAround")}</div>
          </div>
          <div className="flex gap-4 items-center">
            <div className="min-w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
              <CursorIcon />{" "}
            </div>
            <div>
              {t(
                "PlaceTheCursorOnASectionOfTheFloorAndClickTheLeftMouseButtonToMoveAroundThe3DScene"
              )}
            </div>
          </div>
        </div>
        <LookAroundButton onClick={onClick} />
      </div>
    </div>
  );
};

export default ThreeDTourHelpModal;