"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Instagram, Twitter } from "lucide-react";

export default function AdminLayout({
  children,
}: {
        children: React.ReactNode;
      }) {
  const router = useRouter();

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const isLoggedIn = localStorage.getItem("adminLoggedIn");
      if (!isLoggedIn) {
        router.push("/login");
      }
    }
  }, [router]);

  const handleLogout = () => {
    localStorage.removeItem("adminLoggedIn");
    router.push("/login");
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              {
                name: "Home",                id: "/"},
              {
                name: "Admin Dashboard",                id: "/admin"},
            ]}
            button={{
              text: "Logout",              onClick: handleLogout,
            }}
            brandName="Admin Panel"
          />
        </div>
        <main className="flex-grow p-8">
          {children}
        </main>
        <div id="footer" data-section="footer">
          <FooterCard
            logoText="Product Platform Admin"
            copyrightText="© 2024 Product Platform. All rights reserved."
            socialLinks={[
              {
                icon: Twitter,
                href: "#",                ariaLabel: "Twitter"},
              {
                icon: Facebook,
                href: "#",                ariaLabel: "Facebook"},
              {
                icon: Instagram,
                href: "#",                ariaLabel: "Instagram"},
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
