const courses = [
  {
    title: "API Testing",
    price: "800$",
    instructor: "By Alex John",
    lessons: "12 Lessons",
    students: "1.5k Students",
    date: "Oct 20, 2025",
    img: "../assets/images/pic4.png",
  },
  {
    title: "UI/UX Design",
    price: "500$",
    instructor: "By Sarah Jenkins",
    lessons: "24 Lessons",
    students: "2.8k Students",
    date: "Nov 05, 2025",
    img: "../assets/images/pic5.png",
  },
  {
    title: "Visual Design",
    price: "300$",
    instructor: "By David Miller",
    lessons: "18 Lessons",
    students: "950 Students",
    date: "Dec 12, 2025",
    img: "../assets/images/recommended3.png",
  },
  {
    title: "Frontend Skills",
    price: "800$",
    instructor: "By Emily Blunt",
    lessons: "32 Lessons",
    students: "3.2k Students",
    date: "Jan 10, 2026",
    img: "../assets/images/recommended4.png",
  },
  {
    title: "Node.js Basics",
    price: "1200$",
    instructor: "By Michael Chen",
    lessons: "15 Lessons",
    students: "1.1k Students",
    date: "Feb 22, 2026",
    img: "../assets/images/pic4.png",
  },
  {
    title: "React Mastery",
    price: "600$",
    instructor: "By Robert Fox",
    lessons: "10 Lessons",
    students: "4.5k Students",
    date: "Mar 15, 2026",
    img: "../assets/images/pic5.png",
  },
  {
    title: "Mobile App Dev",
    price: "2000$",
    instructor: "By John Doe",
    lessons: "20 Lessons",
    students: "1.8k Students",
    date: "Mar 28, 2026",
    img: "../assets/images/recommended3.png",
  },
  {
    title: "Python Pro",
    price: "2500$",
    instructor: "By Kevin Heart",
    lessons: "40 Lessons",
    students: "5.2k Students",
    date: "Apr 05, 2026",
    img: "../assets/images/recommended4.png",
  },
];

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

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

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

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

  currentData.forEach((item) => {
    wrapper.innerHTML += `
    <a href="./course-details.html" class="session-item ${currentViewMode}">
      <img src="${item.img}" alt="Session" />
      <div class="mt-1">
        <h3 class="card-hader mb-1">${item.title}</h3>
        
        <div class="flex justify-between items-center mb-1">
           <p class="text-[#9AA4B2] text-[11px]">${item.instructor}</p>
           <p class="text-[#9AA4B2] text-[10px]">${item.date}</p>
        </div>

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

        <div class="flex gap-4 items-center mt-2">
          <span class="card-price">${item.price}</span>
          <span class="text-yellow-500">⭐ 4.9</span>
        </div>
      </div>
    </a>
  `;
  });
  updatePagination();
}

function switchView(mode) {
  currentViewMode = 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(courses.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 = () => {
      currentPage = i;
      renderCourses(i);
    };
    pArea.appendChild(btn);
  }
}

renderCourses(1);
