Vertical accordion

"use client"; // This demo also needs to be a client component

import { useState, useEffect } from "react";
import { VerticalAccordion } from "@/components/ui/vertical-accordion"; // Убедитесь, что путь к вашему компоненту корректен
import { FiSun, FiMoon } from "react-icons/fi"; // For theme toggle icons

const DemoVerticalAccordion = () => {
  // State to manage the theme mode
  const [isDarkMode, setIsDarkMode] = useState(() => {
    // Initialize theme from localStorage or default to false (light mode)
    if (typeof window !== 'undefined') {
      return localStorage.getItem("theme") === "dark";
    }
    return false;
  });

  // Effect to apply/remove 'dark' class on the HTML element
  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [isDarkMode]);

  const toggleTheme = () => {
    setIsDarkMode((prevMode) => !prevMode);
  };

  return (
    // For fullscreen demo, wrap the component in an h-screen w-full container
    // The background here will match the accordion's section background
    <div className="flex h-screen w-full justify-center items-center bg-white dark:bg-black relative">
      <VerticalAccordion />

      {/* Theme toggle button */}
      <button
        onClick={toggleTheme}
        className="absolute top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-black dark:text-white transition-colors duration-200"
        aria-label="Toggle theme"
      >
        {isDarkMode ? <FiSun size={24} /> : <FiMoon size={24} />}
      </button>
    </div>
  );
};

export { DemoVerticalAccordion };