'use client';

import { useState, useEffect } from 'react';
import Head from 'next/head';
import Preloader from "../../components/partials/preloaders";
// import Sidebar from './partials/sidebar';
import Overlay from "../../components/partials/overlay";
import Header from "../../components/partials/header";
import Breadcrumb from "../../components/partials/breadcrumb";
import AlertSuccess from '../../components/partials/alert/alert-success';
import AlertWarning from "../../components/partials/alert/alert-warning";
import AlertError from '../../components/partials/alert/alert-error';
import AlertInfo from '../../components/partials/alert/alert-info';

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

  useEffect(() => {
    // Initialize dark mode from localStorage
    const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
    setDarkMode(savedDarkMode);
  }, []);

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

  if (!loaded) {
    return <Preloader />;
  }

  return (
    <div className={`${darkMode ? 'dark bg-[#101828]' : ''}`}>
      <div className="flex h-screen overflow-hidden">
        {/* <Sidebar /> */}
        
        <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
          <Overlay />
         <div className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
                   <Header />
                   </div>
          
          <main>
            <div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
              <Breadcrumb pageName="Alerts" />
              
              <div className="space-y-5 sm:space-y-6">
                <div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
                  <div className="px-6 py-5">
                    <h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
                      Success Alert
                    </h3>
                  </div>
                  <div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
                    <div className="space-y-6">
                      <AlertSuccess />
                    </div>
                  </div>
                </div>

                <div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
                  <div className="px-6 py-5">
                    <h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
                      Warning Alert
                    </h3>
                  </div>
                  <div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
                    <div className="space-y-6">
                      <AlertWarning />
                    </div>
                  </div>
                </div>

                <div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
                  <div className="px-6 py-5">
                    <h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
                      Error Alert
                    </h3>
                  </div>
                  <div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
                    <div className="space-y-6">
                      <AlertError />
                    </div>
                  </div>
                </div>

                <div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
                  <div className="px-6 py-5">
                    <h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
                      Info Alert
                    </h3>
                  </div>
                  <div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
                    <div className="space-y-6">
                      <AlertInfo />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  );

  };