"use client";

import { useBoolean } from "usehooks-ts";

import { Button } from "../ui/button/button";
import { Dialog, DialogContent, DialogHeader } from "../ui/dialog";
import LIcon from "../ui/lucid-icon/lucid-icon";

const DevelopmentPanel = () => {
  const panelBoolean = useBoolean();
  // const { strategy, setStrategy } = useApp();
  return (
    <>
      <div className="fixed bottom-14 left-0">
        <Button onClick={panelBoolean.toggle}>
          <LIcon name="Settings" />
        </Button>
      </div>
      <Dialog
        modal
        open={panelBoolean.value}
        onOpenChange={panelBoolean.setValue}
      >
        <DialogContent>
          <DialogHeader>
            <div className="text-2xl">Development Panel</div>
          </DialogHeader>
          <div>
            <div>App Strategy</div>
            <div className="mt-1 flex gap-3">
              {/* <Button
                onClick={() => {
                  setStrategy("payment-booking");
                }}
                variant="primary"
                disabled={strategy === "payment-booking"}
                leftIcon={
                  strategy === "payment-booking" ? { name: "Check" } : undefined
                }
              >
                B2C
              </Button>
              <Button
                onClick={() => {
                  setStrategy("booking-request");
                }}
                variant="primary"
                disabled={strategy === "booking-request"}
                leftIcon={
                  strategy === "booking-request" ? { name: "Check" } : undefined
                }
              >
                Corporate
              </Button> */}
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default DevelopmentPanel;