"use client";

import { useState } from "react";
import { Bounce, ToastContainer, toast } from "react-toastify";
import PopUpQuiz from "./overlay/PopUpQuiz";
import Button from "../shared/reusableComponents/Reusablebutton";
import { useTranslations } from "next-intl";
const Quiz: React.FC = () => {
  const t = useTranslations("Header") // استخدم useTranslations للـ client side

  const [isOpen, setIsOpen] = useState(false);
  // const notify = (): void =>
  //     toast.success("Thank you !", {
  //         position: "bottom-right",
  //         autoClose: 2000,
  //         hideProgressBar: false,
  //         closeOnClick: true,
  //         pauseOnHover: true,
  //         draggable: true,
  //         progress: undefined,
  //         theme: "dark",
  //         transition: Bounce,
  //     })
  const open = (): void => {
    setIsOpen(true);
 
  };
  const isClose = (): void => {
    setIsOpen(false);
    // notify()
  };
  return (
    <>
      <PopUpQuiz isOpen={isOpen} isClose={isClose} />
      <div className="fixed right-4 bottom-[20px] z-[60]">
        <Button
          onClick={open}
          type="button"
          className="hover:!bg-white/80 !px-2 lg:!px-3"
          styleMe
        >
          
          {t('Speak to our experts')}
        </Button>
        {/* <button
          onClick={open}
          className="cursor-pointer text-white bg-amber-400"
        >
          Button
        </button> */}
      </div>
      {/* <ToastContainer
                position="bottom-right"
                autoClose={2000}
                hideProgressBar={false}
                newestOnTop={false}
                closeOnClick
                rtl={false}
                pauseOnFocusLoss
                draggable
                pauseOnHover
                theme="dark"
                transition={Bounce}
            /> */}
    </>
  );
};

export default Quiz;