/**
 * @fileoverview React component for GameFooter.jsx
 * 
 * @module components.game.GameFooter
 */


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

export default function GameFooter({
  gameConfig,
  currentPhase,
  onHelpClick,
  onOpenPhaseSelector,
}) {
  const totalPhases = gameConfig.fases.length;
  const displayPhase = currentPhase ?? currentPhase;

  const ajuda = () => {
    if (onHelpClick) {
      onHelpClick();
      return;
    }
    alert("Recurso de ajuda será implementado em breve!");
  };

  return (
    <div className="bg-gray-900">
      <div className="flex items-center justify-between px-6 py-3">
        {/* Lado esquerdo - Botão de Ajuda (desativado temporariamente, tour será reimplementado) */}
        <div className="flex items-center invisible">
          <button
            onClick={ajuda}
            data-tour="help-button"
            title="Ajuda"
            className="bg-green-100 text-black font-medium py-2 px-6 lg:py-3 lg:px-9 text-sm lg:text-base rounded-full transition-all duration-200 hover:bg-green-200 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-opacity-50"
          >
            Ajuda
          </button>
        </div>
        {/* Centro - Indicador de Fase Atual/Total */}
        <div className="flex items-center space-x-4">
          <div className="phase-indicator">
            <span className="text-white font-medium text-sm lg:text-xl">
              <span className="phase-current">{displayPhase}</span>
              <span className="phase-separator">/</span>
              <span className="phase-total">{totalPhases}</span>
            </span>
          </div>
        </div>
        {/* Lado direito - Botão do Seletor de Fases */}
        <div className="flex items-center">
          <button
            onClick={onOpenPhaseSelector}
            data-tour="phase-selector"
            title="Selecionar Fase"
            className="bg-green-100 text-black font-medium py-2 px-6 lg:py-3 lg:px-9 lg:text-lg rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-opacity-50 hover:bg-green-200 hover:scale-105 hover:shadow-lg"
          >
            Fases
          </button>
        </div>
      </div>
    </div>
  );
}

GameFooter.propTypes = {
  gameConfig: PropTypes.object.isRequired,
  currentPhase: PropTypes.number,
  onHelpClick: PropTypes.func,
  onOpenPhaseSelector: PropTypes.func,
};
