import { MetaProvider, Title } from "@solidjs/meta";
import { A } from "@solidjs/router";
import { createEffect, onMount, onCleanup, type JSX } from "solid-js";
import Navbar from "./Navbar";
import Footer from "./Footer";

interface AppShellProps {
  children: JSX.Element;
  title?: string;
}

export default function AppShell(props: AppShellProps) {
  const title = () => props.title ?? "ShieldAI";

  onMount(() => {
    const onRouteChange = () => {
      window.scrollTo({ top: 0, behavior: "smooth" });
    };

    const observer = new MutationObserver(() => {
      onRouteChange();
    });

    if (document.body) {
      observer.observe(document.body, { childList: true, subtree: true });
    }

    onCleanup(() => {
      observer.disconnect();
    });
  });

  return (
    <MetaProvider>
      <Title>{title()}</Title>
      <div class="min-h-screen flex flex-col bg-[var(--color-bg)]">
        <Navbar />
        <main class="flex-1 pt-16 bg-dot-grid">
          {props.children}
        </main>
        <Footer />
      </div>
    </MetaProvider>
  );
}
