"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 Sidebar = dynamic(() => import("../../components/Sidebar"), { 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 });
const TableSix = dynamic(() => import("../../components/partials/table/TableSix"), { ssr: false });

export default function BasicTables() {
    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="basicTables" 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="Basic Tables" />
                            </div>

                            <div className="space-y-5 sm:space-y-6">
                                <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                                    <div className="px-5 py-4 sm:px-6 sm:py-5">
                                        <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                            Basic Table 1
                                        </h3>
                                    </div>
                                    <div className="border-t border-gray-100 p-5 dark:border-gray-800 sm:p-6">
                                        {/* Table Six */}
                                        <TableSix />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    );
}