"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>
  );
}