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

const ButtomPanel = () => {
  const { setModal } = useModal();
  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}
            isCircleRounded
          />
          <Button text="Privacy Policy" buttonType="special" isCircleRounded />
        </div>
      </div>
      <div className="p-6">
        <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
          <img src="../images/masterplan/compass.png" alt="compass" />
        </div>
      </div>
    </div>
  );
};

export default ButtomPanel;
