function AvatarSilhouette() {
  return (
    <svg width="72%" height="72%" viewBox="0 0 40 40" fill="none" className="block">
      <circle cx="20" cy="15" r="8.5" fill="#fff" fillOpacity="0.9" />
      <ellipse cx="20" cy="36" rx="13" ry="9" fill="#fff" fillOpacity="0.9" />
    </svg>
  )
}

export function ProfileAvatar({ compact = false }: { compact?: boolean }) {
  return (
    <div
      className={`relative z-[2] ${compact ? "mb-4" : "mb-[clamp(16px,1.8vw,22px)]"}`}
    >
      <div
        className={`rounded-full overflow-hidden border-[3px] border-white shadow-[0_8px_24px_-6px_rgba(15,23,42,0.28)] bg-gradient-to-br from-[#2a2d33] to-black flex items-end justify-center ${
          compact ? "w-[72px] h-[72px]" : "w-[clamp(88px,9vw,112px)] h-[clamp(88px,9vw,112px)]"
        }`}
      >
        <AvatarSilhouette />
      </div>
      <div
        className={`absolute bottom-[5px] right-[5px] rounded-full bg-[#34a853] border-[3px] border-white animate-online-pulse ${
          compact ? "w-[14px] h-[14px]" : "w-[clamp(14px,1.4vw,17px)] h-[clamp(14px,1.4vw,17px)]"
        }`}
      />
    </div>
  )
}