import "./SkillsCard.css";

export const SkillCard = ({
  skill,
  level,
  maxLevel,
  experience,
  onUpgrade,
  canAfford,
}) => {
  const isLocked = level === 0;
  const isMaxLevel = level >= maxLevel;

  const expToNext = Math.floor(100 * Math.pow(1.5, level));
  const progressPercent = Math.min(100, (experience / expToNext) * 100);

  return (
    <div
      className={`skill-item-card ${isLocked ? "locked" : ""} ${isMaxLevel ? "mastered" : ""}`}
    >
      <div className="skill-card-header">
        <div className="skill-icon-wrapper">
          {/* Іконка може бути в meta або за дефолтом */}
          <i className={`fas ${skill.meta?.icon || "fa-atom"}`}></i>
        </div>
        <div className="skill-title-block">
          <div className="skill-name">{skill.displayName}</div>
          <div className="skill-level-tag">
            {isMaxLevel ? "MAXED" : `RANK ${level}/${maxLevel}`}
          </div>
        </div>
      </div>

      <p className="skill-desc">{skill.description}</p>

      {!isMaxLevel && !isLocked && (
        <div className="skill-progress-section">
          <div className="progress-info">
            <span>Neural Sync</span>
            <span>
              {Math.floor(experience)} / {expToNext}
            </span>
          </div>
          <div className="skill-progress-bar">
            <div
              className="fill"
              style={{ width: `${progressPercent}%` }}
            ></div>
          </div>
        </div>
      )}

      <div className="skill-card-actions">
        {isLocked ? (
          <button
            className="btn-skill-unlock"
            disabled={!canAfford}
            onClick={onUpgrade}
          >
            INSTALL MODULE (2 PTS)
          </button>
        ) : isMaxLevel ? (
          <div className="mastery-label">MODULE FULLY OPTIMIZED</div>
        ) : (
          <button
            className="btn-skill-upgrade"
            disabled={!canAfford}
            onClick={onUpgrade}
          >
            UPGRADE (1 PT)
          </button>
        )}
      </div>
    </div>
  );
};
