import React from "react";
import PropTypes from "prop-types";

/**
 * BadgeProgress component - displays progress bars for badges in progress
 * @param {Array} badges - Array of badge objects with progress information
 */
const BadgeProgress = ({ badges }) => {
  // Filter to show only badges that are in progress (not earned and have some progress)
  const inProgressBadges = badges.filter(
    (badge) => !badge.isEarned && badge.progress > 0 && badge.threshold > 0
  );

  if (inProgressBadges.length === 0) {
    return (
      <div className="alert alert-info">
        <p className="mb-0">
          Complete tasks and participate in events to earn badges!
        </p>
      </div>
    );
  }

  return (
    <div className="badge-progress-container">
      <h5 className="mb-3">Badges In Progress</h5>
      {inProgressBadges.map((badge) => {
        const percentage = Math.round((badge.progress / badge.threshold) * 100);
        return (
          <div key={badge._id} className="mb-3">
            <div className="d-flex justify-content-between align-items-center mb-1">
              <div className="d-flex align-items-center">
                <span style={{ fontSize: "1.5rem", marginRight: "0.5rem" }}>
                  {badge.icon || "🏆"}
                </span>
                <div>
                  <strong>{badge.name}</strong>
                  <br />
                  <small className="text-muted">{badge.description}</small>
                </div>
              </div>
              <span className="badge badge-info">
                {badge.progress} / {badge.threshold}
              </span>
            </div>
            <div className="progress" style={{ height: "20px" }}>
              <div
                className={`progress-bar ${percentage >= 75 ? "bg-success" : percentage >= 50 ? "bg-info" : "bg-warning"}`}
                role="progressbar"
                style={{ width: `${percentage}%` }}
                aria-valuenow={badge.progress}
                aria-valuemin="0"
                aria-valuemax={badge.threshold}
              >
                {percentage}%
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

BadgeProgress.propTypes = {
  badges: PropTypes.arrayOf(
    PropTypes.shape({
      _id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      description: PropTypes.string.isRequired,
      icon: PropTypes.string,
      progress: PropTypes.number.isRequired,
      threshold: PropTypes.number.isRequired,
      isEarned: PropTypes.bool.isRequired,
    })
  ).isRequired,
};

export default BadgeProgress;