// import Hyperspeed from "../common/Hyperspeed";
// import { hyperspeedPresets } from "../presets/hyperspeedPresets";
// import ClickSpark from "../common/ClickSpark";
import Navbar from "../components/Navbar";
import { assetInfoStore } from "../store/assetInfoStore";
import { useEffect } from "react";
import { Footer } from "@gardenfi/garden-book";
import { network } from "../constants/constants";

type LayoutProps = {
  children: React.ReactNode;
};

export function Layout({ children }: LayoutProps) {
  const { fetchAndSetAssetsAndChains } = assetInfoStore();

  useEffect(() => {
    fetchAndSetAssetsAndChains();
  }, [fetchAndSetAssetsAndChains]);
  return (
    <div className="relative overflow-hidden">
      {/* <ClickSpark
        sparkColor='#fff'
        sparkSize={10}
        sparkRadius={15}
        sparkCount={8}
        duration={400}
      > */}
        <div className="absolute inset-0 z-[-30] bg-primary"></div>
        <div className="fixed top-0 left-0 w-screen h-screen z-0 bg-white bg-opacity-50">
          {/* <Hyperspeed effectOptions={hyperspeedPresets.one} /> */}
        </div>
        <div className="relative z-10 min-h-[100vh] min-w-[100vw]">
          <Navbar />
          {children}
        <Footer className={"mt-auto"} network={network} />
        </div>
      {/* </ClickSpark> */}
    </div >
  );
}