'use client'

import { useEffect, useState } from 'react'
import { getWalletConnectConfig, type WalletConnectConfigResponse } from '@/services/api/walletConnect'

export default function WalletConnectPostureNote() {
  const [config, setConfig] = useState<WalletConnectConfigResponse | null>(null)

  useEffect(() => {
    let cancelled = false
    getWalletConnectConfig()
      .then((value) => {
        if (!cancelled) setConfig(value)
      })
      .catch(() => {
        if (!cancelled) setConfig(null)
      })
    return () => {
      cancelled = true
    }
  }, [])

  if (!config) return null

  return (
    <p className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">
      WalletConnect v2 posture: <strong>{config.enabled ? 'enabled' : config.status}</strong>. Browser extension wallets use{' '}
      <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-900">{config.fallbackAuth}</code> today.
      {config.message ? ` ${config.message}` : ''}
    </p>
  )
}
