<template>
  <swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    :autoplay="{ delay: 5000 }"
    :pagination="{ clickable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
  
    <swiper-slide class='swiper-slide' v-for="item in reviews" :key="item.text">
      <div class="max-w-2xl px-8 py-4 mx-auto bg-white rounded-lg shadow-md dark:bg-dark-grey" style="cursor: auto;">
        <div class="flex items-center justify-between">
          <span class="text-sm font-light text-medium-grey dark:text-medium-grey">{{item.date}}</span> 
          <div class="flex items-center justify-end mt-4">
          <div class="flex items-center">
            <span class='text-sm font-bold text-amber-medium dark:text-white hover:text-yellow-medium dark:hover:text-light-grey hover:underline' v-for="x in Array(Number(item.rating))" :key="item.text"><i class="fas fa-star bg-200 icon-warning"></i></span>
          </div>
        </div>
          
        </div> 
        <div class="mt-2">
          <img :src="item.profile_photo_url" class="shadow-lg rounded-full max-w-full mx-auto" style="max-width: 120px;"/>
          <div class="pt-6 text-center">
            <h5 class="text-xl font-bold">{{item.author_name}}</h5>
          </div>
          <p class="mt-2 text-dark-grey dark:text-dark-grey">{{item.text}}</p>
        </div> 
        <div class="flex items-center justify-end mt-4">
          <div v-if="item.social === 1">
            <i class="fab fa-yelp px-2"></i>
            <a :href="'https://www.yelp.com/biz/medihand-acupuncture-clinic-pico-rivera-2'" target="_blank" class="px-3 py-1 text-sm font-bold text-light-grey transition-colors duration-200 transform bg-dark-grey rounded cursor-pointer hover:bg-dark-grey">Posted on Yelp</a>
          </div>
          <div v-if="item.social === 2">
            <i class="fab fa-google px-2"></i>
            <a :href="'https://www.google.co.kr/search?q=medihand+acupuncture&source=hp&ei=9Kd7YqaXAsWX-Abr37ywCg&iflsig=AJiK0e8AAAAAYnu2BHGEUJd8-LEL3iKkUOhtR2miOFpx&gs_ssp=eJzj4tZP1zcsya0osqgyNGC0UjWosDBINkoxMks1TEo0tzRLTbIyqEgxSDQ0TjM1TzWwTDaxNEn1EslNTcnMSMxLUUhMLi0ozUsuKS1KBQAtYhcs&oq=medihand&gs_lcp=Cgdnd3Mtd2l6EAEYAjIFCAAQgAQyBQgAEIAEMgsILhCABBDHARCvATILCC4QgAQQxwEQrwEyBQgAEIAEMgQIABAeMgQIABAeMgQIABAeMgQIABAeMgQIABAeOggIABCABBCxAzoUCC4QgAQQsQMQgwEQxwEQowIQ1AI6BAgAEAM6CwgAEIAEELEDEIMBOgsILhCABBCxAxCDAToOCC4QgAQQsQMQxwEQ0QM6EQguEIAEELEDEIMBEMcBENEDOhEILhCABBCxAxCDARDHARCjAjoRCC4QgAQQsQMQgwEQxwEQrwE6DgguEIAEELEDEIMBENQCOgUILhCABDoHCAAQgAQQCjoGCAAQChAeUIMKWNMTYI8iaAFwAHgAgAGcAYgB_weSAQMwLjiYAQCgAQGwAQA&sclient=gws-wiz#lrd=0x80c2d26e1ba796eb:0xd0a13f57e09c494e,1'" target="_blank" class="px-3 py-1 text-sm font-bold text-light-grey transition-colors duration-200 transform bg-dark-grey rounded cursor-pointer hover:bg-dark-grey">Posted on Google</a>
          </div>
        </div>
      </div>
    </swiper-slide>
    
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import { Navigation, Pagination, Autoplay, A11y } from 'swiper';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/pagination';
  import 'swiper/css/navigation';
  import 'swiper/css/autoplay';
  
  // Import Swiper styles
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        // console.log(swiper);
      };
      const onSlideChange = () => {
        // console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Pagination, Autoplay, A11y],
      };
    },
    props: {
      reviews: {
        type: Object,
        required: true,
        social: Number,
        profile_photo_url: String,
        author_name: String,
        date: String,
        rating: String,
        text: String,

        default: () => ({
          // flowCorePoolSize: 200,
          // flowQueueCapacity: 200,
          // flowMaxPoolSize: 200,
          // color: "text-white",
          // flowCorePoolSizeDetail: "기동 시 부여되는 스레드 수",
          // flowQueueCapacityDetail: "Thread 대기 큐의 수",
          // flowMaxPoolSizeDetail: "Thread 대기 큐가 찼을 경우 증가하는 수",
        }),
      },
    },

  };
</script>
