const freeCourses = [
  {
    title: "API Testing",
    price: "Free",
    time: "1h 20m",
    lessons: "12 Lessons",
    students: "1.5k",
    instructor: "By Alex John",
    img: "../assets/images/pic4.png",
  },
  {
    title: "UI/UX Design",
    price: "Free",
    time: "3h 45m",
    lessons: "24 Lessons",
    students: "2.8k",
    instructor: "By Sarah Jenkins",
    img: "../assets/images/pic5.png",
  },
  {
    title: "Node.js Basics",
    price: "Free",
    time: "2h 15m",
    lessons: "15 Lessons",
    students: "1.1k",
    instructor: "By Michael Chen",
    img: "../assets/images/pic4.png",
  },
  {
    title: "React Intro",
    price: "Free",
    time: "1h 45m",
    lessons: "10 Lessons",
    students: "4.5k",
    instructor: "By Robert Fox",
    img: "../assets/images/pic5.png",
  },
  {
    title: "Digital Marketing",
    price: "Free",
    time: "1h 50m",
    lessons: "14 Lessons",
    students: "2.1k",
    instructor: "By Sophia Lee",
    img: "../assets/images/recommended3.png",
  },
  {
    title: "Python for Beginners",
    price: "Free",
    time: "5h 20m",
    lessons: "45 Lessons",
    students: "6.7k",
    instructor: "By James Wilson",
    img: "../assets/images/recommended4.png",
  },
];

let currentPage = 1;
const itemsPerPage = 4;
let currentView = "grid";

function renderCourses(page) {
  currentPage = page;
  const wrapper = document.getElementById("sessionWrapper");
  wrapper.innerHTML = "";

  wrapper.className =
    currentView === "grid" ? "sessions-grid" : "sessions-list";

  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const currentData = freeCourses.slice(start, end);

  currentData.forEach((item) => {
    wrapper.innerHTML += `
  <article class="w-full ">
    <a href="./course-details.html" class="session-item  ">
      <div class="relative flex-shrink-0">
<img 
        class="w-full aspect-[16/10] object-cover block" 
        src="${item.img}" 
        alt="${item.title}" 
        loading="lazy" 
      />        <div class="time-badge free">
          <span class="p-caption font-medium">${item.time}</span>
        </div>
      </div>
      <div class="mt-1">
        <h3 class="card-hader mb-0.5">${item.title}</h3>
        
        <p class="text-[#9AA4B2] text-[11px] mb-1">${item.instructor}</p>

        <div class="flex items-center gap-3 text-[#9AA4B2] text-[10px] ">
           <span class="flex items-center gap-1">📚 ${item.lessons}</span>
           <span class="flex items-center gap-1">👥 ${item.students}</span>
        </div>

        <div class="flex justify-between items-center mt-auto">
          <div class="flex gap-3 items-center">
            <span class="card-price !text-[#7B48FF]">${item.price}</span>
            <span class="text-yellow-500 text-[12px]">⭐ 4.9</span>
          </div>
        </div>
      </div>
    </a>
  </article>
`;
  });
  updatePagination();
}

function switchView(mode) {
  currentView = mode;
  const listBtn = document.getElementById("listBtn");
  const gridBtn = document.getElementById("gridBtn");

  if (mode === "grid") {
    gridBtn.classList.add("active");
    listBtn.classList.remove("active");
  } else {
    listBtn.classList.add("active");
    gridBtn.classList.remove("active");
  }
  renderCourses(currentPage);
}

function updatePagination() {
  const pArea = document.getElementById("paginationArea");
  const totalPages = Math.ceil(freeCourses.length / itemsPerPage);
  pArea.innerHTML = "";

  for (let i = 1; i <= totalPages; i++) {
    const btn = document.createElement("button");
    btn.innerText = i;
    btn.className = `page-btn ${i === currentPage ? "active" : ""}`;
    btn.onclick = () => renderCourses(i);
    pArea.appendChild(btn);
  }
}

renderCourses(1);
