'use client'

interface Badge {
  id: number
  badgeCode: string
}

export function UserBadgesReadonly({ badges }: { badges: Badge[] }) {
  if (badges.length === 0) {
    return <p className="text-sm text-muted-foreground">No badges</p>
  }

  return (
    <div className="flex flex-wrap gap-2">
      {badges.map((badge) => (
        <div
          key={badge.id}
          className="flex items-center gap-1.5 rounded-md border bg-card px-2 py-1 text-sm"
        >
          <img
            src={
              process.env.NEXT_PUBLIC_BADGE_URL
                ? `${process.env.NEXT_PUBLIC_BADGE_URL}/${badge.badgeCode}.gif`
                : `/swf/c_images/album1584/${badge.badgeCode}.gif`
            }
            alt={badge.badgeCode}
            className="h-5 w-5"
            onError={(e) => {
              ;(e.target as HTMLImageElement).style.display = 'none'
            }}
          />
          <span>{badge.badgeCode}</span>
        </div>
      ))}
    </div>
  )
}