import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue, toolPrefix = '') {
  // Construct prefixed key: [toolPrefix-]key
  const prefixPart = toolPrefix ? `${toolPrefix}-` : ''
  const prefixedKey = `${prefixPart}${key}`

  // Initialize state from local storage or default value
  const storedValue = localStorage.getItem(prefixedKey)
  const data = ref(storedValue ? JSON.parse(storedValue) : defaultValue)

  // Watch for changes and update local storage
  watch(data, (newValue) => {
    if (newValue === null || newValue === undefined) {
      localStorage.removeItem(prefixedKey)
    } else {
      localStorage.setItem(prefixedKey, JSON.stringify(newValue))
    }
  }, { deep: true })

  return data
}