import { fetchEvents } from "./api/ticketmaster.js";
import { createEventCard } from "./ui/eventCard.js";

const button = document.querySelector("#load-events");
const container = document.querySelector("#event-list");
const cityInput = document.querySelector("#city-input");

button.addEventListener("click", async () => {

  const city = cityInput.value.trim();

  if (!city) {
    container.innerHTML = "Please enter a city.";
    return;
  }

  container.innerHTML = "Loading events...";

  const events = await fetchEvents(city);

  container.innerHTML = "";

  if (events.length === 0) {
    container.innerHTML = "No events found.";
    return;
  }

  events.forEach(event => {
    const card = createEventCard(event);
    container.appendChild(card);
  });

});

cityInput.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    button.click();
  }
});