import { useNostrAuth } from '@/hooks/useNostrAuth'
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-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan disabled:opacity-50"
      >
        {loading ? 'Connecting...' : 'Connect with Nostr'}
      </button>
      {error && <p className="text-sm text-red-400">{error}</p>}
    </div>
  )
}

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

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

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