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

function obterDificuldade(dadosFase) {
  // Usa a dificuldade da fase, se existir, senão calcula pelo número
  if (dadosFase?.dificuldade) {
    switch (dadosFase.dificuldade) {
      case "Fácil":
        return { nivel: "Fácil", cor: "bg-green-500", emoji: "😊" };
      case "Médio":
        return { nivel: "Médio", cor: "bg-yellow-500", emoji: "🤔" };
      case "Difícil":
        return { nivel: "Difícil", cor: "bg-orange-500", emoji: "😤" };
      case "Extremo":
        return { nivel: "Extremo", cor: "bg-red-500", emoji: "🔥" };
      default:
        return null;
    }
  }
  return null;
}

// English alias for migration
const getDifficulty = (phaseData) => obterDificuldade(phaseData);

function GameFaseInfo({ phaseData = {}, phaseNumber }) {
  const dificuldade = getDifficulty(phaseData);



  return (
    <div className="game-fase-info p-1 lg:px-3 lg:py-2">
      {phaseData && phaseData.nome ? (
        <div className="flex items-center justify-between">
          {/* Número da fase */}
          <div className="flex-shrink-0 w-8 h-8 lg:w-12 lg:h-12 bg-green-100 rounded-full flex items-center justify-center text-black text-sm lg:text-lg font-bold shadow-lg">
            {phaseNumber}
          </div>
          {/* Título/Subtítulo */}
          <div className="flex-1 min-w-0 px-3 lg:px-5">
            <h3 className="text-base lg:text-2xl font-semibold text-gray-800 truncate">
              {phaseData.nome}
            </h3>
            {phaseData.descricao && (
              <p className="text-base lg:text-lg text-gray-600 leading-tight whitespace-pre-wrap mt-1 pr-12 lg:pr-0">
                {phaseData.descricao}
              </p>
            )}
          </div>
          {/* Dificuldade */}
          <div className="flex-shrink-0">
            {dificuldade && (
              <div
                className={`flex items-center space-x-1 text-xs lg:text-sm text-white px-2 py-1 lg:px-3 lg:py-1.5 rounded-full font-medium ${dificuldade.cor}`}
              >
                <span className="lg:text-base">{dificuldade.emoji}</span>
                <span>{dificuldade.nivel}</span>
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className="flex items-center justify-between text-gray-500">
          <div className="w-8 h-8 lg:w-12 lg:h-12 bg-green-100 rounded-full flex items-center justify-center text-black text-sm lg:text-lg font-title font-bold">
            ?
          </div>
          <div className="flex-1 px-3 lg:px-5">
            <p className="text-xs lg:text-sm">
              Selecione uma fase para começar
            </p>
          </div>
          <div className="flex-shrink-0"></div>
        </div>
      )}
    </div>
  );
}

export default GameFaseInfo;

export { getDifficulty };

GameFaseInfo.propTypes = {
};