Scrum4Me/components/shared/status-bar-debug-toggle.tsx

'use client'

import { useEffect } from 'react'
import { useUserSettingsStore } from '@/stores/user-settings/store'

export function DebugToggle() {
  const debugMode = useUserSettingsStore(
    (s) => s.entities.settings.devTools?.debugMode ?? false,
  )
  const hydrated = useUserSettingsStore((s) => s.context.hydrated)
  const setPref = useUserSettingsStore((s) => s.setPref)

  useEffect(() => {
    if (!hydrated) return
    document.body.classList.toggle('debug-mode', debugMode)
  }, [debugMode, hydrated])

  return (
    <button
      type="button"
      onClick={() => void setPref(['devTools', 'debugMode'], !debugMode)}
      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>
  )
}