import { Link } from 'react-router-dom';

export default function ProfileAchievementBadges({
  achievements = [],
  linkToAchievements = false,
}) {
  if (!achievements.length) return null;

  return (
    <div className="achievement-badges-block">
      <div className="catalog-badges-head">
        <h3>Achievements</h3>
        {linkToAchievements && (
          <Link to="/achievements" className="achievement-badges-link">
            View all
          </Link>
        )}
      </div>
      <div className="achievement-badges" aria-label="Unlocked achievements">
        {achievements.map((a) => {
          const inner = (
            <>
              <span className="achievement-badge-icon" aria-hidden>
                {a.icon || '★'}
              </span>
              <span className="achievement-badge-name">{a.name}</span>
            </>
          );
          return linkToAchievements ? (
            <Link
              key={a.key}
              to="/achievements"
              className="achievement-badge"
              title={a.description}
            >
              {inner}
            </Link>
          ) : (
            <div
              key={a.key}
              className="achievement-badge"
              title={a.description}
            >
              {inner}
            </div>
          );
        })}
      </div>
    </div>
  );
}
