import { useNostrConnect } from '@/hooks/useNostrConnect'
import { ConnectedUserMenu } from './ConnectedUserMenu'

function ConnectForm({ onConnect, loading, error }: {
  onConnect: () => void
  loading: boolean
  error: string | null
}) {
  return (
    <div className="flex flex-col gap-2">
      <button
        onClick={() => {
          void onConnect()
        }}
        disabled={loading}
        className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
      >
        {loading ? 'Connecting...' : 'Connect with Nostr'}
      </button>
      {error && <p className="text-sm text-red-600">{error}</p>}
    </div>
  )
}

export function ConnectButton() {
  const { connected, pubkey, profile, loading, error, connect, disconnect } = useNostrConnect()

  if (connected && pubkey) {
    return (
      <ConnectedUserMenu
        pubkey={pubkey}
        profile={profile}
        onDisconnect={() => {
          void disconnect()
        }}
        loading={loading}
      />
    )
  }

  return (
    <ConnectForm
      onConnect={() => {
        void connect()
      }}
      loading={loading}
      error={error}
    />
  )
}