import useModal from "../store/useModal";
import useCompass from "../store/useCompass";
import Button from "./Button";
import DisclaimerIcon from "./icons/DisclaimerIcon";
import DisclaimerModal from "./modals/DisclaimerModal";

const ButtomPanelCompass = () => {
  const { setModal } = useModal();
  const { currentCompassRotate } = useCompass();

  const handleOnDisclaimerClick = () => {
    setModal(<DisclaimerModal />);
  };

  return (
    <div className="absolute bottom-0 left-0 z-20 flex items-end justify-between w-full gap-2 pointer-events-none select-none touch-none">
      <div className="flex flex-col gap-2">
        <div className="flex gap-2 pb-6 pl-6">
          <Button
            text="Disclaimer"
            buttonType="special"
            className="pl-2"
            icon={<DisclaimerIcon />}
            onClick={handleOnDisclaimerClick}
          />
          {/* <Button text="Privacy Policy" buttonType="special" /> */}
        </div>
      </div>
      <div className="p-6 max-sm:hidden">
        <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
          <img
            style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }}
            src="/images/masterplan/compass.png"
            alt="compass"
            className="transition-transform duration-[750ms] ease-in-out"
          />
        </div>
      </div>
    </div>
  );
};

export default ButtomPanelCompass;