"use client";

import React, { Suspense, useEffect, useState } from "react";
import NavbarHumas from "./navbar/NavbarHumas";
import Footer from "../landing/Footer";
import NewsTicker from "../landing/NewsTicker";

interface Props {
  children: React.ReactNode;
}

export const HumasLayout = ({ children }: Props) => {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  // Render
  if (!hasMounted) return null;
  return (
    <section className="flex flex-col">
      <NavbarHumas size="sm" />
      <NavbarHumas size="lg" />
      <NewsTicker />

      {children}
      <Suspense>
        <Footer />
      </Suspense>
    </section>
  );
};
