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

const ComplexButtomPanel = () => {
  const { setModal } = useModal();
  const { currentCompassRotate } = useSequence();

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

  return (
    <div className="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
      <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">
        <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 ComplexButtomPanel;