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={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={disconnect}
        loading={loading}
      />
    )
  }

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