import React from "react";
import styles from "./Genre.module.css";
import { genres } from "../../api";
import { useHistory } from "react-router-dom";
import { Card } from "react-bootstrap";

const Genre = () => {
  let history = useHistory();
  return (
    <div className={styles.gridContainer}>
      {genres.map((genre, i) => (
        <div key={i}>
          <Card className={styles.genreCard}>
            <Card.Body>
              <Card.Title
                className={styles.gridItem}
                onClick={(event) => {
                  event.preventDefault();
                  const genreID = ++i;
                  history.push({
                    pathname: `/anime/genre/${genre}`,
                    state: {
                      genreID: genreID,
                    },
                  });
                  window.location = `/anime/genre/${genre}`;
                }}
              >
                {genre}
              </Card.Title>
            </Card.Body>
          </Card>
        </div>
      ))}
    </div>
  );
};

export default Genre;