<template>
  <div>
      <section class="container mx-auto my-16 px-4 xl:px-24">
      <div class="flex flex-col lg:flex-row place-items-center place-content-between gap-y-10">
      <div class="grid h-fit">
          <h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
              <h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today's popular lesson <br> plans specially curated for your classroom.</h1>
              <div><a target="_blank" href="/lesson-plan/dailyplan" class="text-lg bg-blue-700 px-4 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div>
      </div>
      <div class="grid place-items-center">
          <swiper class="slider-width cursor-pointer" draggable="false"
              :modules="modules"
              :slides-per-view="1"
              :space-between="50"
              navigation
              pagination
              :scrollbar="{ draggable: true }"
              :autoplay=" { delay: 2500, disableOnInteraction: false}"
              @swiper="onSwiper"
              @slideChange="onSlideChange">
              <swiper-slide v-for="lesson in lessonplan" :key="lesson.id"> 
              <img class="" lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
              </swiper-slide>      
          </swiper>
      </div>
      </div>
  </section>
  </div>
</template>
<style>
.text-color-1 {
      color: #7C4C23;
      font-family: 'Quicksand';
  }
.slider-width {
width: 350px;
}
@media screen and (min-width: 1500px) {
    .hero-text {
      font-size: 50px;
      
      
    }
  }
  
  @media screen and (max-width: 1499px) {
    .hero-text {
      font-size: 40px;
      
    }
  }
  @media screen and (max-width: 1199px) {
    .hero-text {
      font-size: 30px;
      
    }
  }
</style>
<script is:inline>
   // Import Swiper Vue.js components
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';
    import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';

  // Import Swiper styles
  import 'swiper/css';
  // const swiper = new Swiper('.swiper', {
  //       autoplay: {
  //         delay: 5000,
  //       },
  //     });

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        // console.log(swiper);
      };
      const onSlideChange = () => {
        // console.log('slide change');
      };
      
      
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],

      };
    },
 data() {
   return {
       page: null,
       lessonplan:null,
       isLoading: true,

   }
},
 mounted: function () {
   fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan')
       .then(response => response.json())
       .then(data => {
           this.lessonplan = data.data
           // this.isLoading = false
           // console.log(this.lessonplan)
           // return this.page[0].id
       })
   },
};
</script>