import useModal from "../../store/useModal";
import Button from "../Button";
import CrossIcon from "../icons/CrossIcon";
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";

const HelpModal = () => {
  const { setModal } = useModal();

  const handleOnCloseClick = () => setModal(null);

  return (
    <div className="absolute z-[99999901] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
      <div className="h-full col-span-3 col-start-10 bg-[#F3F3F2] py-6 px-6 flex flex-col justify-between items-center">
        <div className="flex flex-col gap-8">
          <div className="flex justify-between pb-4 border-b border-[#E2E2DC]">
            <h2 className="text-subheadline-m font-semibold">
              Tips for working
            </h2>
            <Button
              icon={<CrossIcon />}
              buttonType="fab"
              onClick={handleOnCloseClick}
              isCircleRounded
            />
          </div>
          <img
            src="/images/masterplan/help/1.png"
            alt="1"
            className="rounded-2xl"
          />
          <div className="flex flex-col gap-2 text-[#0D1922]">
            <h2 className="text-subheadline-m font-semibold">1. Workspace</h2>
            <p className="text-m">
              For more comfortable work with the general plan, size it to the
              full screen.
            </p>
          </div>
        </div>
        <div className="flex gap-8">
          <Button
            icon={<LeftArrowSliderIcon />}
            buttonType="fab"
            className="text-black"
          />
          <div className="flex items-center gap-3">
            <div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
            <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
            <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
            <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
            <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
          </div>
          <Button
            icon={<RightArrowSliderIcon />}
            buttonType="fab"
            className="text-black"
          />
        </div>
      </div>
    </div>
  );
};

export default HelpModal;