import React, { useEffect, useState } from "react";
import { apiDataGenres } from "../../api";
import { useLocation } from "react-router-dom";
import DisplayCommonCard from "../CommonComponents/DisplayCommonCard/DisplayCommonCard";

const GenreCard = () => {
  const location = useLocation();

  const [genreArray, setGenreArray] = useState([]);

  // calling the api only one
  useEffect(() => {
    callGenreApi();
    // eslint-disable-next-line
  }, []);

  const callGenreApi = async () => {
    // awaiting so the async call can be complete
    let genreData = await apiDataGenres(location.state.genreID);
    setGenreArray(genreData);
  };
  return (
    <div>
      <DisplayCommonCard animeData={genreArray} />
    </div>
  );
};

export default GenreCard;