export const useLoginModal = () => {
  const showLoginModal = useState('loginModal.show', () => false)
  const loginModalOptions = useState('loginModal.options', () => ({
    title: 'Sign in to continue',
    description: 'Enter your email to receive a secure login link',
    dismissible: true,
    redirectTo: null,
  }))

  const openLoginModal = (options = {}) => {
    loginModalOptions.value = {
      title: options.title || 'Sign in to continue',
      description: options.description || 'Enter your email to receive a secure login link',
      dismissible: options.dismissible !== false,
      redirectTo: options.redirectTo || null,
    }
    showLoginModal.value = true
  }

  const hideLoginModal = () => {
    showLoginModal.value = false
  }

  return {
    showLoginModal: readonly(showLoginModal),
    loginModalOptions: readonly(loginModalOptions),
    openLoginModal,
    hideLoginModal,
  }
}