const proceedTab = document.getElementById("proceedTab");
const completedTab = document.getElementById("completedTab");
const courseList = document.getElementById("courseList");

const proceedHTML = `
        <a href="./learning-progress.html" class="course-card-main">
          <div class="flex items-center w-full">
            <img src="../assets/images/processCorse1.png" class="course-img-size">
            <div class="flex-1 p-2">
              <h3 class="text-[15px] font-medium text-white">Design for Beginner</h3>
              <p class="text-[#9AA4B2] text-[11px] mb-2 mt-0.5">58% Completed</p>
              <div class="w-full h-1.5 bg-[#2d2050] rounded-full overflow-hidden">
                <div class="h-full bg-[#7B48FF] rounded-full" style="width: 58%"></div>
              </div>
            </div>
          </div>
        </a>
        <a href="./learning-progress.html" class="course-card-main">
          <div class="flex items-center w-full">
            <img src="../assets/images/processCorse2.png" class="course-img-size">
            <div class="flex-1 p-2">
              <h3 class="text-[15px] font-medium text-white">Product Design</h3>
              <p class="text-[#9AA4B2] text-[11px] mb-2 mt-0.5">58% Completed</p>
              <div class="w-full h-1.5 bg-[#2d2050] rounded-full overflow-hidden">
                <div class="h-full bg-[#7B48FF] rounded-full" style="width: 58%"></div>
              </div>
            </div>
          </div>
        </a>
        <a href="./learning-progress.html" class="course-card-main">
          <div class="flex items-center w-full">
            <img src="../assets/images/recommended4.png" class="course-img-size">
            <div class="flex-1 p-2">
              <h3 class="text-[15px] font-medium text-white">Web Development</h3>
              <p class="text-[#9AA4B2] text-[11px] mb-2 mt-0.5">58% Completed</p>
              <div class="w-full h-1.5 bg-[#2d2050] rounded-full overflow-hidden">
                <div class="h-full bg-[#7B48FF] rounded-full" style="width: 58%"></div>
              </div>
            </div>
          </div>
        </a>
        `;

const completedHTML = `
        <a href="./compleated-course.html"  class="course-card-main">
          <div class="flex items-center gap-[12px] p-1">
            <img src="../assets/images/compleatCorse1.png" class="course-img-size">
            <div class="flex-1">
              <h3 class="text-[15px] font-medium text-white">Graphic Design</h3>
              <div class="flex items-center gap-2 mt-2">
                <img src="../assets/images/Top_Instructors.png" class="w-6 h-6 rounded-full" />
                <div class="flex gap-7 " > 
                 <div class="leading-tight"> 
                  <p class="text-[#7B48FF] text-[11px] font-medium">Mr. Harry</p>
                  <p class="text-[#64748b] text-[10px]">UI/UX Designer</p>
                 </div>
                <div class="leading-tight flex  justify-center items-center gap-1 mt-[14px]">
                  <span class="text-[#A4ACB9] text-[9px] font-medium"
                  >Downloaded</span
                  >
                  <img
                  src="../assets/icons/downlodTik.svg"
                  class="w-4 h-4"
                  alt="done"
                  />
                </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="./compleated-course.html" class="course-card-main">
          <div class="flex items-center gap-[12px] p-1">
            <img src="../assets/images/compleateCorse2.png"  class="course-img-size">
            <div class="flex-1">
              <h3 class="text-[15px] font-medium text-white">Programming & Technology</h3>
              <div class="flex items-center gap-2 mt-2">
                <img src="../assets/images/Top_Instructors.png" class="w-6 h-6 rounded-full" />
                <div class="flex gap-7 " > 
                 <div class="leading-tight"> 
                  <p class="text-[#7B48FF] text-[11px] font-medium">Mr. Harry</p>
                  <p class="text-[#64748b] text-[10px]">UI/UX Designer</p>
                 </div>
                <div class="leading-tight flex  justify-center items-center gap-1 mt-[14px]">
                  <span class="text-[#A4ACB9] text-[9px] font-medium"
                  >Downloaded</span
                  >
                  <img
                  src="../assets/icons/downlodTik.svg"
                  class="w-4 h-4"
                  alt="done"
                  />
                </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="./compleated-course.html" class="course-card-main">
          <div class="flex items-center gap-[12px] p-1">
            <img src="../assets/images/compleateCorse3.png"  class="course-img-size">
            <div class="flex-1">
              <h3 class="text-[15px] font-medium text-white">Full-Stack Integration</h3>
              <div class="flex items-center gap-2 mt-2">
                <img src="../assets/images/Top_Instructors.png" class="w-6 h-6 rounded-full" />
                <div class="flex gap-7 " > 
                 <div class="leading-tight"> 
                  <p class="text-[#7B48FF] text-[11px] font-medium">Mr. Harry</p>
                  <p class="text-[#64748b] text-[10px]">UI/UX Designer</p>
                 </div>
                <div class="leading-tight flex  justify-center items-center gap-1 mt-[14px]">
                  <span class="text-[#A4ACB9] text-[9px] font-medium"
                  >Downloaded</span
                  >
                  <img
                  src="../assets/icons/downlodTik.svg"
                  class="w-4 h-4"
                  alt="done"
                  />
                </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        `;

courseList.innerHTML = proceedHTML;

function switchTab(activeBtn, inactiveBtn, content) {
  activeBtn.className = "btn-tab-active";
  inactiveBtn.className = "btn-tab-deactive";
  courseList.innerHTML = content;
}

proceedTab.addEventListener("click", () =>
  switchTab(proceedTab, completedTab, proceedHTML),
);
completedTab.addEventListener("click", () =>
  switchTab(completedTab, proceedTab, completedHTML),
);
