import React from 'react'

const FALLBACK_AVATAR = 'https://files.skinbase.org/default/avatar_default.webp'

const BADGE_TONES = {
  rose: 'border-rose-400/25 bg-rose-500/10 text-rose-200',
  amber: 'border-amber-400/25 bg-amber-500/10 text-amber-200',
  sky: 'border-sky-400/25 bg-sky-500/10 text-sky-200',
}

export default function ActivityAvatar({ user }) {
  if (!user) return null

  const badgeClassName = BADGE_TONES[user.badge?.tone] || BADGE_TONES.sky

  return (
    <div className="flex items-start gap-3">
      <a href={user.profile_url || '#'} className="shrink-0">
        <img
          src={user.avatar_url || FALLBACK_AVATAR}
          alt={user.name || user.username || 'User'}
          className="h-11 w-11 rounded-2xl object-cover ring-1 ring-white/10"
          loading="lazy"
          decoding="async"
          onError={(event) => {
            event.currentTarget.src = FALLBACK_AVATAR
          }}
        />
      </a>

      <div className="min-w-0">
        <a href={user.profile_url || '#'} className="truncate text-sm font-semibold text-white hover:text-sky-200 transition-colors">
          {user.name || user.username || 'User'}
        </a>
        {user.username && <p className="truncate text-xs text-white/35">@{user.username}</p>}
        {user.badge && (
          <span className={`mt-1 inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${badgeClassName}`}>
            {user.badge.label}
          </span>
        )}
      </div>
    </div>
  )
}