"use client";
import { Navbar } from "./Navbar";
import { Footer } from "./Footer";
import { useTheme } from "../../context/ThemeContext";

interface IProps {
  children?: React.ReactNode;
}

export default function LayoutBase({ ...props }: IProps) {
  const { isDark } = useTheme();

  return (
    <div className={`relative flex flex-col min-h-screen min-w-screen transition-colors duration-300 ${isDark ? "text-slate-100" : "text-slate-900"}`}>
      <div className={`fixed inset-0 -z-10 transition-all duration-300 ${isDark ? "bg-linear-to-b from-slate-950 via-slate-950 to-[#1a0a4a]" : "bg-white"}`} />

      <Navbar />
      <main className="flex-1 mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
        {props.children}
      </main>
      <Footer />
    </div>
  );
}