import { useState, useEffect } from '@wordpress/element'

export const useSettingsVisibility = (effectiveMode: string | boolean) => {
  const [settingsVisible, setSettingsVisible] = useState(false)

  useEffect(() => {
    setSettingsVisible(effectiveMode === 'manual')
  }, []) // Empty dep array to run only when Gutenberg first loads

  return { settingsVisible, setSettingsVisible }
}
