// app/avatars/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 Avatar01 from "../../components/partials/avatar/avatar01";
import Avatar02 from"../../components/partials/avatar/avatar02";
import Avatar03 from "../../components/partials/avatar/avatar03";
import Avatar04 from "../../components/partials/avatar/avatar04";

export default function AvatarsPage() {
  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(() => {
    const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
    setDarkMode(savedDarkMode);
    
    const timer = setTimeout(() => {
      setLoaded(true);
    }, 500);

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

  useEffect(() => {
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
  }, [darkMode]);

  const pageName = 'Avatars';

  return (
    <>

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

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

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

            {/* Header */}
            <Header 
              darkMode={darkMode}
              setDarkMode={setDarkMode}
              stickyMenu={stickyMenu}
              setStickyMenu={setStickyMenu}
              sidebarToggle={sidebarToggle}
              setSidebarToggle={setSidebarToggle}
            />

            {/* Main Content */}
            <main>
              <div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
                {/* Breadcrumb */}
                <Breadcrumb pageName={pageName} />

                <div className="space-y-5 sm:space-y-6">
                  {/* Default Avatar */}
                  <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">
                        Default Avatar
                      </h3>
                    </div>
                    <div className="p-8 border-t border-gray-100 dark:border-gray-800">
                      <Avatar01 />
                    </div>
                  </div>

                  {/* Avatar with online indicator */}
                  <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">
                        Avatar with online indicator
                      </h3>
                    </div>
                    <div className="p-8 border-t border-gray-100 dark:border-gray-800">
                      <Avatar02 />
                    </div>
                  </div>

                  {/* Avatar with Offline indicator */}
                  <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">
                        Avatar with Offline indicator
                      </h3>
                    </div>
                    <div className="p-8 border-t border-gray-100 dark:border-gray-800">
                      <Avatar03 />
                    </div>
                  </div>

                  {/* Avatar with busy indicator */}
                  <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">
                        Avatar with busy indicator
                      </h3>
                    </div>
                    <div className="p-8 border-t border-gray-100 dark:border-gray-800">
                      <Avatar04 />
                    </div>
                  </div>
                </div>
              </div>
            </main>
          </div>
        </div>
      </div>
    </>
  );
}