<!-- Based on tutorial-https://github.com/nabendu82/JS-Projects   -->

<header>
  <h1><i class="fa-brands fa-github"></i> Search for GitHub Users <i class="fa-solid fa-magnifying-glass"></i></h1>
</header>

<form id="form">
  <input type="text" id="search" placeholder="Search a Github User " />
</form>
<main id="main"></main>

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap");

* {
  box-sizing: border-box;
}
header {
  padding: 20px;
  margin: 15px;
}
h1 {
  font-size: 45px;
  color: white;
}
body {
  background: #00a6fbff;
  background: linear-gradient(
    270deg,
    #00a6fbff,
    #0582caff,
    #006494ff,
    #003554ff,
    #051923ff
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Comfortaa", cursive;
  margin: 0;
  min-height: 100vh;
}

input {
  background-color: #00a6fbff;
  border-radius: 10px;
  border: none;
  box-shadow: 0 5px 10px black, 0 15px 40px rgba(0, 0, 0, 0.1);
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 0.8rem;
  padding: 1rem;
  margin-bottom: 2rem;
}

input::placeholder {
  color: #051923ff;
}

.card {
  background-color: #00a6fbff;
  background-image: linear-gradient(
    90deg,
    #00a6fbff,
    #0582caff,
    #006494ff,
    #003554ff,
    #051923ff
  );
  border-radius: 20px;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  padding: 3rem;
  max-width: 800px;
}

.avatar {
  border: 10px solid #051923ff;
  border-radius: 50%;
  height: 150px;
  width: 150px;
}

.user-info {
  color: #eee;
  margin-left: 2rem;
}

.user-info h2 {
  margin-top: 0;
}

.user-info ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  max-width: 400px;
}

.user-info ul li strong {
  font-size: 0.9rem;
  margin-right: 0.5rem;
}

.repo {
  background-color: #003554ff;
  border-radius: 50px;
  display: inline-block;
  color: white;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  text-decoration: none;
}

/* --blue-jeans: #00a6fbff;
--green-blue-crayola: #0582caff;
--sapphire-blue: #006494ff;
--prussian-blue: #003554ff;
--rich-black-fogra-29: #051923ff; */

const API_URL = "https://api.github.com/users/";

const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");

getUser("kwing25");

async function getUser(username) {
  const resp = await fetch(API_URL + username);
  const respData = await resp.json();
  createUserCard(respData);
  getRepos(username);
}

async function getRepos(username) {
  const resp = await fetch(API_URL + username + "/repos");
  const respData = await resp.json();
  addReposToCard(respData);
}

function addReposToCard(repos) {
  const reposEl = document.getElementById("repos");
  repos.forEach((repo) => {
    const repoEl = document.createElement("a");
    repoEl.classList.add("repo");
    repoEl.href = repo.html_url;
    repoEl.target = "_blank";
    repoEl.innerText = repo.name;
    reposEl.appendChild(repoEl);
  });
}

function createUserCard(user) {
  const cardHTML = `
      <div class="card">
          <div>
              <img class="avatar" src="${user.avatar_url}" alt="${user.name}" />
          </div>
          <div class="user-info">
              <h2>${user.name}</h2>
              <p>${user.bio}</p>
              <ul class="info">
                  <li><strong>Followers :</strong>${user.followers}</li>
                  <li><strong>Following :</strong>${user.following}</li>
                  <li><strong>Repos :</strong>${user.public_repos}</li>
              </ul>
              <div id="repos"></div>
          </div>
      </div>
  `;

  main.innerHTML = cardHTML;
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const user = search.value;
  if (user) {
    getUser(user);
    search.value = "";
  }
});