import React from 'react';
import { Helmet } from 'react-helmet';

import GameEntry from '@components/GameEntry';
import { Game } from '@customTypes/Game';
import '@css/Maps.css';

interface GamesProps {
  games: Game[];
}

const Games: React.FC<GamesProps> = ({ games }) => {
  const _page_load = () => {
    const loaders = document.querySelectorAll('.loader');
    loaders.forEach(loader => {
      (loader as HTMLElement).style.display = 'none';
    });
  };

  React.useEffect(() => {
    document
      .querySelectorAll('.games-page-item-body')
      .forEach((game, index) => {
        game.innerHTML = '';
      });
    _page_load();
  }, []);

  return (
    <div className="games-page">
      <Helmet>
        <title>LPHUB | Games</title>
      </Helmet>
      <section>
        <div className="games-page-content">
          <div className="games-page-item-content">
            {games.map((game, index) => (
              <GameEntry game={game} key={index} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

export default Games;