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

export default function ProfileCatalogBadges({
  completed = [],
  luckPercent = 0,
  linkToCatalog = false,
}) {
  if (!completed.length) return null;

  return (
    <div className="catalog-badges-block">
      <div className="catalog-badges-head">
        <h3>Catalog</h3>
        {luckPercent > 0 && (
          <span className="catalog-badges-luck">+{luckPercent}% luck</span>
        )}
      </div>
      <div className="catalog-badges" aria-label="Completed catalog chapters">
        {completed.map((ch) => {
          const inner = (
            <>
              {ch.imageUrl ? (
                <img src={ch.imageUrl} alt="" loading="lazy" />
              ) : (
                <span className="catalog-badge-fallback">▣</span>
              )}
              <span className="catalog-badge-check" aria-hidden>
                ✓
              </span>
              <span className="catalog-badge-name">{ch.name}</span>
            </>
          );
          return linkToCatalog ? (
            <Link
              key={ch.caseId}
              to="/catalog"
              className="catalog-badge"
              title={`${ch.name} · chapter complete`}
            >
              {inner}
            </Link>
          ) : (
            <div
              key={ch.caseId}
              className="catalog-badge"
              title={`${ch.name} · chapter complete`}
            >
              {inner}
            </div>
          );
        })}
      </div>
    </div>
  );
}
