export default async function ProjectsPage() {
  const projects = await getProjects();

  return (
    <section>
      {projects.map((project) => (
        <ProjectCard key={project.title} {...project} />
      ))}
    </section>
  );
}

const checkWinner = () => {
  for (const pattern of winningPatterns) {
    const [a, b, c] = pattern;

    if (board[a] && board[a] === board[b] && board[b] === board[c]) {
      updateScore(board[a]);
      showWinner(board[a]);
    }
  }
};

const checkPin = () => {
  const guess = inputs.map((input) => input.value).join('');

  if (guess === secretPin) {
    launchConfetti();
    showMessage('You cracked the code!');
  } else {
    showMessage(`Wrong PIN! It was ${secretPin}`);
    resetGame();
  }
};

const getWeather = async (city) => {
  const response = await fetch(`${API_URL}&q=${city}`);
  const data = await response.json();

  temperature.textContent = `${Math.round(data.main.temp)}°C`;
  cityName.textContent = data.name;
  humidity.textContent = `${data.main.humidity}%`;
};

const addTask = (text) => {
  if (!text || tasks.includes(text)) return;

  tasks.unshift(text);
  localStorage.setItem('tasks', JSON.stringify(tasks));
  renderTasks();
};

const getExchangeRate = async () => {
  const response = await fetch(`${API_URL}/${fromCurrency}`);
  const data = await response.json();

  const rate = data.conversion_rates[toCurrency];
  const result = (amount * rate).toFixed(2);

  resultText.textContent = `${amount} ${fromCurrency} = ${result} ${toCurrency}`;
};

const getJoke = async () => {
  try {
    const response = await fetch('https://icanhazdadjoke.com/', {
      headers: { Accept: 'application/json' }
    });

    const data = await response.json();
    jokeText.textContent = data.joke;
  } catch (error) {
    jokeText.textContent = 'Oops! Failed to fetch a joke.';
  }
};

const createGradient = () => {
  const gradient = `linear-gradient(${direction}, ${randomColor()}, ${randomColor()})`;

  preview.style.background = gradient;
  codeOutput.textContent = `background: ${gradient};`;
};

const toggleTheme = () => {
  const isDark = document.body.classList.toggle('dark');

  localStorage.setItem('theme', isDark ? 'dark' : 'light');
  modeText.textContent = isDark ? 'Dark Mode' : 'Light Mode';
};

const renderBlogs = (posts) => {
  posts.forEach((post) => {
    container.innerHTML += `
      <article class='blog-card'>
        <h2>${post.title}</h2>
        <p>${post.description}</p>
      </article>`;
  });
};