import React from 'react';

function SolutionNavigator({ solutions, currentIndex, onIndexChange }) {
  if (!solutions || solutions.length === 0) {
    return null;
  }

  const currentSolution = solutions[currentIndex];

  const nextSolution = () => {
    if (currentIndex < solutions.length - 1) {
      onIndexChange(currentIndex + 1);
    }
  };

  const prevSolution = () => {
    if (currentIndex > 0) {
      onIndexChange(currentIndex - 1);
    }
  };

  const goToSolution = (index) => {
    onIndexChange(index);
  };

  return (
    <div className="solution-navigator">
      <div className="solution-header">
        <h3>🎯 Solutions ({solutions.length} found)</h3>
        
        {solutions.length > 1 && (
          <div className="solution-controls">
            <button 
              onClick={prevSolution} 
              disabled={currentIndex <= 0}
              className="btn btn-sm btn-outline"
            >
              ← Previous
            </button>
            
            <div className="solution-pagination">
              {solutions.map((_, index) => (
                <button
                  key={index}
                  onClick={() => goToSolution(index)}
                  className={`pagination-btn ${index === currentIndex ? 'active' : ''}`}
                >
                  {index + 1}
                </button>
              ))}
            </div>
            
            <button 
              onClick={nextSolution} 
              disabled={currentIndex >= solutions.length - 1}
              className="btn btn-sm btn-outline"
            >
              Next →
            </button>
          </div>
        )}
      </div>

      <div className="solution-display">
        <div className="solution-info">
          <span className="solution-counter">
            Solution {currentIndex + 1} of {solutions.length}
          </span>
        </div>
        
        <div className="solution-table-container">
          {currentSolution.header && currentSolution.rows ? (
            <table className="solution-table">
              <thead>
                <tr>
                  {currentSolution.header.map((header, index) => (
                    <th key={index}>{header}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {currentSolution.rows.map((row, rowIndex) => (
                  <tr key={rowIndex}>
                    {row.map((cell, cellIndex) => (
                      <td key={cellIndex}>{cell}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <div className="solution-json">
              <pre>{JSON.stringify(currentSolution, null, 2)}</pre>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default SolutionNavigator;