const searchInput = document.getElementById("search");
const resultsDiv = document.getElementById("results");
const form = document.getElementById("searchForm");

function runSearch() {
  const query = searchInput.value.toLowerCase();
  resultsDiv.innerHTML = "";

  if (query === "") return;

  const matches = dictionary.filter(entry =>
    entry.word.toLowerCase().includes(query) ||
    entry.prefixes.some(p => p.toLowerCase().includes(query)) ||
    entry.suffixes.some(s => s.toLowerCase().includes(query))
  );

  if (matches.length === 0) {
    resultsDiv.innerHTML = "<p>No results</p>";
    return;
  }

  matches.forEach(entry => {
    const div = document.createElement("div");
    div.innerHTML = `
      <strong>${entry.word}</strong><br>
      Meaning: ${entry.meaning}<br>
      Prefixes: ${entry.prefixes.join(", ")}<br>
      Suffixes: ${entry.suffixes.join(", ")}<br>
      <hr>
    `;
    resultsDiv.appendChild(div);
  });
}

form.addEventListener("submit", (e) => {
  e.preventDefault(); // prevents page reload
  runSearch();
});