import React from "react";
import "./reactStyling.css";
import MapResults from "./definedResults";

function ResultsHere(response) {
  if (!response.Term) {
    return null;
  } else {
    return (
      <div className="searchResults">
        <h1 className="selected-word">{response.Term.data[0].word}</h1>
        <h4 className="pronounce-h4">{response.Term.data[0].phonetic}</h4>
        <ol className="ol-for-defined-results">
          {response.Term.data.map(function (meaning, index) {
            return (
              <div key={index} className="div-of-ol-for-defined-results">
                <MapResults info={meaning} />
              </div>
            );
          })}
        </ol>
      </div>
    );
  }
}

export default ResultsHere;