import React, { useEffect, useState } from "react";
import { NavLink } from "react-bootstrap";
import styles from "./Ability.module.css";
const Ability = ({ ability }) => {
  console.log(ability);

  const [state, setstate] = useState({});

  useEffect(() => {
    console.log("RENDERED");
    if (Array.isArray(ability)) {
      console.log("выполняется поиск");

      const neededText = ability.find((el, index) => {
        return el.language.name === "en";
      });
      setstate({ neededText });
    }
  }, [ability]);

  console.log(state);
  // остановился на том что приходят две языковых версии текста абилок... надо придумать как будет отображаться именно английская..
  return (
    <div>
      <div className="container">
        <div className="row">
          {state.neededText && (
            <div className="col-lg-12">
              <p>{state.neededText.effect}</p>
              <p>{state.neededText.short_effect}</p>{" "}
            </div>
          )}

          <div className="col-lg-12">
            <NavLink to="/pokemon">Вернуться назад</NavLink>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Ability;