const searchInput = document.getElementById("search-input");
const suggestionsDiv = document.getElementById("suggestions");
const resultsContainer = document.getElementById("results-container");

const dummySuggestions = [
  "what is javascript",
  "how to make a website",
  "best restaurants near me",
  "weather today",
  "current news"
];

searchInput.addEventListener("input", function() {
  const inputValue = searchInput.value.toLowerCase();
  const filteredSuggestions = dummySuggestions.filter(suggestion =>
    suggestion.toLowerCase().startsWith(inputValue)
  );

  displaySuggestions(filteredSuggestions);
});

function displaySuggestions(suggestions) {
  suggestionsDiv.innerHTML = "";
  if (suggestions.length > 0 && searchInput.value) {
    suggestions.forEach(suggestion => {
      const suggestionElement = document.createElement("div");
      suggestionElement.textContent = suggestion;
      suggestionElement.addEventListener("click", function() {
        searchInput.value = suggestion;
        suggestionsDiv.style.display = "none";
        displayResults(suggestion);
      });
      suggestionsDiv.appendChild(suggestionElement);
    });
    suggestionsDiv.style.display = "block";
  } else {
    suggestionsDiv.style.display = "none";
  }
}

searchInput.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    const inputValue = searchInput.value;
    displayResults(inputValue);
    suggestionsDiv.style.display = "none";
  }
});

function displayResults(query) {
  resultsContainer.innerHTML = "";
  const dummyResults = [
    `Result 1 for ${query}`,
    `Result 2 for ${query}`,
    `Result 3 for ${query}`
  ];

  dummyResults.forEach(result => {
    const resultElement = document.createElement("div");
    resultElement.textContent = result;
    resultsContainer.appendChild(resultElement);
  });
}