'use client'

import { useEffect } from 'react'
import { useDebugStore } from '@/stores/debug-store'

export function DebugToggle() {
  const { debugMode, _hydrated, hydrate, toggleDebugMode } = useDebugStore()

  useEffect(() => {
    hydrate(localStorage.getItem('scrum4me:debug-mode') === 'true')
  }, [hydrate])

  useEffect(() => {
    if (!_hydrated) return
    localStorage.setItem('scrum4me:debug-mode', String(debugMode))
    document.body.classList.toggle('debug-mode', debugMode)
  }, [debugMode, _hydrated])

  return (
    <button
      type="button"
      onClick={toggleDebugMode}
      aria-label="Debug-modus togglen"
      aria-pressed={debugMode}
      data-active={debugMode}
      className="ml-2 cursor-pointer rounded px-1 text-xs opacity-40 transition-opacity hover:opacity-100 data-[active=true]:text-info"
    >
      {'{ }'}
    </button>
  )
}