import React from "react";
import "./reactStyling.css";
import Synonyms from "./listForSynonyms";

function AllDefinitions(response) {
  if (response.info.synonyms) {
    return (
      <div className="the-content-of-li-of-defintions">
        <h5 className="header-5-content-of-definition">
          {response.info.definitions[0].definition}
        </h5>
        <h5 className="header-5-part-of-speech">
          {response.info.partOfSpeech}
        </h5>
        <Synonyms list={response.info.synonyms} />
      </div>
    );
  }
}

export default AllDefinitions;

//console.log(response);
//<em className="em-defintion-example">{response.info.example}</em>
//console.log(response.info.synonyms);
//console.log(response.info.example);
//console.log(response.info.definitions[0].definition);
/*if (response.info.synonyms) {
     <Synonyms list={response.info.synonyms} />;
   }
  return (
    <ul>
      <li>{response.info.definition}</li>
      <em className="numbered-list-ol-list-li-em">{response.info.example}</em>
      if (response.info.synonyms) {<Synonyms list={response.info.synonyms} />}
    </ul>
  );*/