import React from "react";
import Head from "next/head";
import Image from "next/image";
import ProjectCard from "../ProjectCard";
import styles from "./GitGallery.module.sass";

export function GitGallery(props) {
  var links = [];

  props.publicGiteaRepos.forEach((repo) => {
    links.push(
      <ProjectCard
        classNames={styles.card_gitea}
        url={repo.html_url}
        fullName={repo.full_name}
        name={repo.name}
        description={repo.description}
        avatarUrl={repo.avatar_url}
      />
    );
  });

  props.publicGithubRepos.forEach((repo) => {
    links.push(
      <ProjectCard
        classNames={styles.card_github}
        url={repo.html_url}
        fullName={repo.full_name}
        name={repo.name}
        description={repo.description}
        avatarUrl={repo.avatar_url}
      />
    );
  });

  return (
    <div className={styles.cardContainer}>
      <h2>These are my public repositories:</h2>
      {links}
    </div>
  );
}