<template>
    <div class="flex justify-center">
      <div
        class="courses"
      >
      <div class="hidden md:block category">
        <h3
          class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
        >
          انتخاب گسترده ای از دوره ها
        </h3>
  
        <p
          class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
        >
          انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
          ماه منتشر می شود
        </p>
    
    
      </div>
        <!-- <home-page-courses-sectionCategories /> -->
        <div
        class="suggestions px-[1vw] md:px-[1.042vw] mt-[8vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
      >
        <h5
          class="border-b pb-[1.5vw] text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
        >
          دوره های پیشنهادی
        </h5>
  
        <div 
          class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
        >
        <div v-for="(course, index) in data?.courses"
        :key="index">
        <Card :course="course" />
      
      </div>
    
        </div>
      </div>
   
      <div
      class="flex text-[#383E43] py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
  >
    <nuxt-link to="/courses"
      class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
    >
      <svg
        class="mb-[0.417vw] h-[4.103vw] w-[4.103vw] md:h-[1.146vw] md:w-[1.146vw]"
        viewBox="0 0 22 23"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.917 10.5833L19.4337 3.06665"
          stroke="#383E43"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M20.1666 6.73325V2.33325H15.7666"
          stroke="#383E43"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M10.083 2.33325H8.24967C3.66634 2.33325 1.83301 4.16659 1.83301 8.74992V14.2499C1.83301 18.8333 3.66634 20.6666 8.24967 20.6666H13.7497C18.333 20.6666 20.1663 18.8333 20.1663 14.2499V12.4166"
          stroke="#383E43"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
      <span class="ms-[2vw] md:ms-[0.417vw] pb-[0.417vw]"> دیدن همه ی دوره ها </span>
    </nuxt-link>
  </div>


      </div>
    </div>
  </template>

  <script setup>
const {data} = await useFetch("/api/course");
// const selectedItems = data.data.value.courses.slice(0, 8);
</script>