import { useRef } from "react";
import { useNextCssRemovalPrevention } from "@madeinhaus/nextjs-page-transition";
import { useRouter } from "next/router";

import Debug from "@/components/debug";
import Footer from "@/components/footer";
import Header from "@/components/header";
import KeyholeAnimation from "@/components/keyhole-animation";
import { FOOTER, HEADER, SOCIALS } from "@/config/data";
import { useIsClient } from "@/hooks";

import styles from "./styles.module.scss";

interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  const router = useRouter();
  const rootRef = useRef<HTMLDivElement>(null);
  const isClient = useIsClient();

  // https://github.com/vercel/next.js/issues/17464
  useNextCssRemovalPrevention();

  // Life at Suno page has its own layout, header, and footer
  const isLifeAtSunoPage = router.pathname === "/";

  if (isLifeAtSunoPage) {
    return (
      <div ref={rootRef} className={styles.rootLayout} suppressHydrationWarning>
        {children}
        {isClient && <Debug />}
      </div>
    );
  }

  return (
    <div ref={rootRef} className={styles.rootLayout} suppressHydrationWarning>
      <Header navItems={HEADER} />
      <main className={styles.main}>{children}</main>
      <Footer navItems={FOOTER} socialItems={SOCIALS} />
      {isClient && <Debug />}
    </div>
  );
}