"use client";
import React, { useEffect, useState } from "react";
import { BiEdit } from "react-icons/bi";

import { MdClose } from "react-icons/md";

const ButtonPressModal = ({
  buttonLabel,
  control,
  type,

  children,
}: {
  buttonLabel: string;
  control?: any;
  type?: string;
  children?: React.ReactNode;
}) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  useEffect(() => {
    if (isOpen) {
      setIsOpen(false);
    }
  }, [control]);
  return (
    <>
      {type ? (
        <div
          className="p-2 w-10 h-10  bg-blue-400 rounded-md flex items-center justify-center cursor-pointer"
          onClick={() => setIsOpen(true)}
        >
          <BiEdit className="text-xl text-white" />
        </div>
      ) : (
        <button
          className="w-fit bg-green-500/50 px-4 py-2 rounded-md cursor-pointer hover:bg-green-500/70 hover:scale-105 shadow-sm hover:shadow-black/30 active:shadow-black/10 active:scale-95 transition-all duration-300"
          onClick={() => setIsOpen(true)}
        >
          {buttonLabel}
        </button>
      )}
      {isOpen && (
        <div className="fixed left-0 top-0 w-screen h-screen bg-black/50 flex justify-center items-center">
          <div className="bg-white rounded-md shadow-md p-5 w-[90%] md:w-[80%] lg:w-[70%] xl:w-[60%] flex flex-col gap-5">
            <div className=" flex justify-between items-center w-full cursor-pointer border-b-2 border-gray-400 pb-2">
              <p className="font-semibold text-lg">{buttonLabel}</p>
              <MdClose className="text-4xl" onClick={() => setIsOpen(false)} />
            </div>
            {children}
          </div>
        </div>
      )}
    </>
  );
};

export default ButtonPressModal;