// src/components/Profile/ProfileHeader.tsx
type Props = {
  username: string
  avatarUrl?: string
}

export default function ProfileHeader({ username, avatarUrl }: Props) {
  return (
    <div className="w-full bg-surface/50 rounded-lg flex flex-col items-center justify-center py-12">
      <div className="relative w-32 h-32 mb-4">
        <img
          src={avatarUrl || `${import.meta.env.BASE_URL}placeholders/placeholder-profile.png`}
          alt={username}
          className="w-32 h-32 rounded-full object-cover border-4 border-background"
        />
      </div>
      <h2 className="text-2xl font-semibold text-center">{username}</h2>
    </div>
  )
}
