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

/**
 * BadgeDisplay component - displays a single badge with icon, name, and description
 * @param {Object} badge - Badge object
 * @param {boolean} isEarned - Whether the badge is earned
 * @param {boolean} showTooltip - Whether to show tooltip on hover
 */
const BadgeDisplay = ({ badge, isEarned = false, showTooltip = true }) => {
  const getRarityColor = (rarity) => {
    switch (rarity) {
      case "common":
        return "#6c757d";
      case "rare":
        return "#0d6efd";
      case "epic":
        return "#6f42c1";
      case "legendary":
        return "#ffc107";
      default:
        return "#6c757d";
    }
  };

  const badgeStyle = {
    filter: isEarned ? "none" : "grayscale(100%) opacity(0.5)",
    borderColor: getRarityColor(badge.rarity),
    borderWidth: "3px",
    transition: "all 0.3s ease",
  };

  const iconStyle = {
    fontSize: "3rem",
    marginBottom: "0.5rem",
  };

  return (
    <div
      className="card badge-card text-center p-3"
      style={badgeStyle}
      title={
        showTooltip
          ? `${badge.name} - ${badge.description}\n${
              badge.criteria?.type
                ? `Unlock: ${badge.criteria.threshold} ${badge.criteria.type.replace(
                    "_",
                    " "
                  )}`
                : ""
            }`
          : ""
      }
    >
      <div style={iconStyle}>{badge.icon || "🏆"}</div>
      <h6 className="mb-1">{badge.name}</h6>
      <p className="small text-muted mb-1">{badge.description}</p>
      <span
        className={`badge badge-${badge.rarity === "legendary" ? "warning" : badge.rarity === "epic" ? "purple" : badge.rarity === "rare" ? "primary" : "secondary"}`}
      >
        {badge.rarity}
      </span>
      {isEarned && (
        <div className="mt-2">
          <span className="badge badge-success">✓ Earned</span>
        </div>
      )}
    </div>
  );
};

BadgeDisplay.propTypes = {
  badge: PropTypes.shape({
    _id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,
    icon: PropTypes.string,
    rarity: PropTypes.oneOf(["common", "rare", "epic", "legendary"]).isRequired,
    criteria: PropTypes.shape({
      type: PropTypes.string,
      threshold: PropTypes.number,
    }),
  }).isRequired,
  isEarned: PropTypes.bool,
  showTooltip: PropTypes.bool,
};

export default BadgeDisplay;