import type { NostrProfile } from '@/types/nostr'
import { UserProfileHeader } from './UserProfileHeader'

interface UserProfileProps {
  profile: NostrProfile
  pubkey: string
  articleCount?: number
}

function ProfileStats({ articleCount }: { articleCount: number }) {
  return (
    <div className="text-center">
      <div className="text-3xl font-bold text-gray-900">{articleCount}</div>
      <div className="text-sm text-gray-500">Article{articleCount !== 1 ? 's' : ''}</div>
    </div>
  )
}

export function UserProfile({ profile, pubkey, articleCount }: UserProfileProps) {
  const displayName = profile.name ?? `${pubkey.slice(0, 16)}...`
  const displayPubkey = `${pubkey.slice(0, 8)}...${pubkey.slice(-8)}`

  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
      <UserProfileHeader
        displayName={displayName}
        displayPubkey={displayPubkey}
        {...(profile.picture ? { picture: profile.picture } : {})}
        {...(profile.nip05 ? { nip05: profile.nip05 } : {})}
      />
      {profile.about && <p className="text-gray-700 mt-2">{profile.about}</p>}
      {articleCount !== undefined && <ProfileStats articleCount={articleCount} />}
    </div>
  )
}