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 flex-col w-[325px] pl-6 pr-3 py-2 bg-[#00000033]">
          <div className="flex gap-1">
            <DisclaimerIcon />
            <p className="text-s text-white">Work in progress</p>
          </div>
          <div className="text-white text-caption-m font-semibold opacity-80">
            Mockups are in the early stages of development and may differ
            significantly from the final version.
          </div>
        </div> */}
        <div className="flex gap-2 pb-6 pl-6">
          <Button
            text="Disclaimer"
            buttonType="tertiary"
            className="pl-2"
            icon={<DisclaimerIcon />}
            onClick={handleOnDisclaimerClick}
          />
          <Button text="Privacy Policy" buttonType="tertiary" />
        </div>
      </div>
      <div className="p-6">
        <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
          <img
            src="../images/masterplan/compass.png"
            alt="compass"
            className=""
          />
        </div>
      </div>
    </div>
  );
};

export default ButtomPanel;