// app/badge/page.tsx
'use client'

import { useState, useEffect } from 'react';
import Head from 'next/head';
import Preloader from "../../components/partials/preloaders";
// import Sidebar from '@/components/partials/Sidebar';
import Overlay from "../../components/partials/overlay";
import Header from "../../components/partials/header";
import Breadcrumb from "../../components/partials/breadcrumb";
import Badge01 from "../../components/partials/badge/Badge01";
import Badge02 from "../../components/partials/badge/Badge02";
import Badge03 from "../../components/partials/badge/Badge03";
import Badge04 from "../../components/partials/badge/Badge04";
import Badge05 from "../../components/partials/badge/Badge05";
import Badge06 from "../../components/partials/badge/Badge06";

export default function BadgePage() {
    const [loaded, setLoaded] = useState(false);
    const [darkMode, setDarkMode] = useState(false);
    const [stickyMenu, setStickyMenu] = useState(false);
    const [sidebarToggle, setSidebarToggle] = useState(false);
    const [scrollTop, setScrollTop] = useState(false);

    useEffect(() => {
        // Load dark mode preference from localStorage
        const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
        setDarkMode(savedDarkMode);

        // Simulate loading
        const timer = setTimeout(() => {
            setLoaded(true);
        }, 500);

        return () => clearTimeout(timer);
    }, []);

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

    const pageName = 'Badge';

    return (
        <>

            <div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
                {/* Preloader */}
                {!loaded && <Preloader />}

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

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

                        {/* 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 */}
                                <Breadcrumb pageName={pageName} />

                                <div className="space-y-5 sm:space-y-6">
                                    {/* With Light Background */}
                                    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                                        <div className="px-6 py-5">
                                            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                                With Light Background
                                            </h3>
                                        </div>
                                        <div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
                                            <Badge01 />
                                        </div>
                                    </div>

                                    {/* With Solid Background */}
                                    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                                        <div className="px-6 py-5">
                                            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                                With Solid Background
                                            </h3>
                                        </div>
                                        <div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
                                            <Badge02 />
                                        </div>
                                    </div>

                                    {/* Light Background with Left Icon */}
                                    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                                        <div className="px-6 py-5">
                                            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                                Light Background with Left Icon
                                            </h3>
                                        </div>
                                        <div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
                                            <Badge03 />
                                        </div>
                                    </div>

                                    {/* Solid Background with Left Icon */}
                                    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                                        <div className="px-6 py-5">
                                            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                                Solid Background with Left Icon
                                            </h3>
                                        </div>
                                        <div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
                                            <Badge04 />
                                        </div>
                                    </div>

                                    {/* Light Background with Right Icon */}
                                    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                                        <div className="px-6 py-5">
                                            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                                Light Background with Right Icon
                                            </h3>
                                        </div>
                                        <div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
                                            <Badge05 />
                                        </div>
                                    </div>

                                    {/* Solid Background with Right Icon */}
                                    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                                        <div className="px-6 py-5">
                                            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                                Solid Background with Right Icon
                                            </h3>
                                        </div>
                                        <div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
                                            <Badge06 />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </main>
                    </div>
                </div>
            </div>
        </>
    );
}