import Image from 'next/image'
import React from 'react'

interface UserProfileHeaderProps {
  displayName: string
  picture?: string
  nip05?: string
}

export function UserProfileHeader({
  displayName,
  picture,
  nip05,
}: UserProfileHeaderProps) {
  return (
    <div className="flex flex-col md:flex-row items-start md:items-center gap-4">
      {picture ? (
        <Image
          src={picture}
          alt={displayName}
          width={96}
          height={96}
          className="rounded-full object-cover border-2 border-gray-200"
        />
      ) : (
        <div className="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center border-2 border-gray-300">
          <span className="text-2xl text-gray-400 font-medium">
            {displayName.charAt(0).toUpperCase()}
          </span>
        </div>
      )}
      <div className="flex-1">
        <h1 className="text-2xl font-bold text-gray-900 mb-2">{displayName}</h1>
        {nip05 && <p className="text-sm text-blue-600 mb-2">{nip05}</p>}
      </div>
    </div>
  )
}