"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Cog6ToothIcon, XMarkIcon } from "@heroicons/react/24/outline"

export function RightSidebarToggle() {
  const [isVisible, setIsVisible] = useState(false)

  const toggleSidebar = () => {
    setIsVisible(!isVisible)

    // Toggle classes for the right sidebar
    const sidebar = document.querySelector(".right-sidebar")
    const overlay = document.querySelector(".right-sidebar-overlay")
    const content = document.querySelector(".main-content")

    if (sidebar) {
      sidebar.classList.toggle("visible")
    }

    if (overlay) {
      overlay.classList.toggle("visible")
    }

    if (content && window.innerWidth <= 1024) {
      content.classList.toggle("mobile-adjusted-content")
    }
  }

  return (
    <>
      {/* Mobile toggle button */}
      <div className="fixed bottom-4 right-4 z-50 md:hidden">
        <Button
          className="h-12 w-12 rounded-full shadow-lg"
          onClick={toggleSidebar}
          aria-label={isVisible ? "Close settings" : "Open settings"}
        >
          {isVisible ? <XMarkIcon className="h-6 w-6" /> : <Cog6ToothIcon className="h-6 w-6" />}
        </Button>
      </div>

      {/* Overlay for mobile */}
      <div className="right-sidebar-overlay" onClick={toggleSidebar} aria-hidden="true" />
    </>
  )
}