"use client";
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';

// Dynamically import components with no SSR
const Preloader = dynamic(() => import("../../components/partials/preloaders"), { ssr: false });
const Overlay = dynamic(() => import("../../components/partials/overlay"), { ssr: false });
const Header = dynamic(() => import("../../components/partials/header"), { ssr: false });
const Breadcrumb = dynamic(() => import("../../components/partials/breadcrumb"), { ssr: false });

export default function BlankPage() {
    const [darkMode, setDarkMode] = useState(false);
    const [loaded, setLoaded] = useState(false);

    useEffect(() => {
        // Initialize dark mode from localStorage
        const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
        if (savedDarkMode !== null) {
            setDarkMode(savedDarkMode);
        }

        // Simulate loading completion
        const timer = setTimeout(() => setLoaded(true), 1000);
        return () => clearTimeout(timer);
    }, []);

    useEffect(() => {
        // Save dark mode preference to localStorage
        localStorage.setItem('darkMode', JSON.stringify(darkMode));
    }, [darkMode]);

    return (
        <div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>

            {/* Preloader */}
            {!loaded && <Preloader />}

            {/* Page Wrapper */}
            <div className="flex h-screen overflow-hidden">
                {/* Sidebar */}
                {/* <Sidebar activePage="blank" darkMode={darkMode} setDarkMode={setDarkMode} /> */}

                {/* Content Area */}
                <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
                    {/* Small Device Overlay */}
                    <Overlay />

                    {/* Header */}

                    <div darkMode={darkMode} setDarkMode={setDarkMode} className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
                        <Header />
                    </div>
                    {/* Main Content */}
                    <main>
                        <div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
                            {/* Breadcrumb */}
                            <div>
                                <Breadcrumb pageName="Blank Page" />
                            </div>

                            <div className="min-h-screen rounded-2xl border border-gray-200 bg-white px-5 py-7 dark:border-gray-800 dark:bg-white/[0.03] xl:px-10 xl:py-12">
                                <div className="mx-auto w-full max-w-[630px] text-center">
                                    <h3 className="mb-4 text-theme-xl font-semibold text-gray-800 dark:text-white/90 sm:text-2xl">
                                        Card Title Here
                                    </h3>

                                    <p className="text-sm text-gray-500 dark:text-gray-400 sm:text-base">
                                        Start putting content on grids or panels, you can also use
                                        different combinations of grids. Please check out the
                                        dashboard and other pages
                                    </p>
                                </div>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    );
}