import React from "react";
import "./ContributorsList.css";

const ContributorsList = ({ contributors }) => {
  if (!contributors || contributors.length === 0) {
    return <p className="text-muted">No contributors data available.</p>;
  }

  return (
    <div className="contributors-list">
      {contributors.map((contributor, index) => (
        <div key={contributor.userId} className="contributor-item">
          <div className="contributor-rank">#{index + 1}</div>
          <div className="contributor-avatar">
            {contributor.profilePicture ? (
              <img
                src={contributor.profilePicture}
                alt={contributor.name}
                className="avatar-img"
              />
            ) : (
              <div className="avatar-placeholder">
                {contributor.name.charAt(0).toUpperCase()}
              </div>
            )}
          </div>
          <div className="contributor-info">
            <div className="contributor-name">
              {contributor.name}
              {contributor.isPremium && (
                <span className="badge bg-warning text-dark ms-2">Premium</span>
              )}
            </div>
            <div className="contributor-stats">
              <small className="text-muted">
                {contributor.stats.points} pts | {contributor.stats.tasksCompleted} tasks |{" "}
                {contributor.stats.streetsAdopted} streets
              </small>
            </div>
          </div>
          <div className="contributor-score">
            <strong>{contributor.score}</strong>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ContributorsList;
