useState or Ref

export const useUser = () => {
  // Shared, SSR-safe state
  const user = useState<any | null>('user', () => null)
  const loading = useState<boolean>('user-loading', () => false)
  const error = useState<string | null>('user-error', () => null)

  const fetchUser = async () => {
    loading.value = true
    error.value = null

    try {
      const { data } = await useFetch('/api/user', {
        credentials: 'include', // important for auth cookies
      })

      user.value = data.value
    } catch (err) {
      error.value = 'Failed to fetch user'
      user.value = null
    } finally {
      loading.value = false
    }
  }

  const clearUser = () => {
    user.value = null
  }

  return {
    user,
    loading,
    error,
    fetchUser,
    clearUser,
  }
}

export const useUser = () => {
  // Shared, SSR-safe state
  const user = useState<any | null>('user', () => null)
  const loading = useState<boolean>('user-loading', () => false)
  const error = useState<string | null>('user-error', () => null)

  const fetchUser = async () => {
    loading.value = true
    error.value = null

    try {
      const { data } = await useFetch('/api/user', {
        credentials: 'include', // important for auth cookies
      })

      user.value = data.value
    } catch (err) {
      error.value = 'Failed to fetch user'
      user.value = null
    } finally {
      loading.value = false
    }
  }

  const clearUser = () => {
    user.value = null
  }

  return {
    user,
    loading,
    error,
    fetchUser,
    clearUser,
  }
}