import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";

import FloatingButton from "./components/FloatingButton";
import Modal from "./components/Modal";
import BackgroundParticles from "./components/Particles";
import Bokhary from "./components/Bokhary";
import Toast from "./components/Toast";
import TimePassed from "./components/TimePassed"

import "@fontsource/vazirmatn";
import "./index.css";

function App() {
  const [modalOpen, setModalOpen] = useState(false);
  const [toast, showToast] = useState(true);


  return (
    <StrictMode>

      <BackgroundParticles />

      <div className="relative min-h-dvh">
        <div className="fixed m-2 top-0 left-0 right-0">
          {toast && (
            <Toast onClose={() => showToast(false)}>
              <TimePassed></TimePassed>
            </Toast>
          )}
        </div>        
        <div className="relative z-10">
          <Bokhary />
        </div>

        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-20">
          <FloatingButton text="اتصال" onClick={() => setModalOpen(true)} />
        </div>
      </div>

      <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} />

    </StrictMode>
  );
}

createRoot(document.getElementById("root")!).render(<App />);