<template>
<swiper class="ele-widget-swiper" :modules="[Navigation]" :loop="true" :breakpoints="{
    0: { slidesPerView: 1, },
    480: { slidesPerView: 2, },
    768: { slidesPerView: 3, },
    1023: { slidesPerView: 4, },
    1199: { slidesPerView: 5, },
}" :space-between="20"
    :navigation="{ prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }" pagination
    :centered-slides="false" :autoplay="false">
    <swiper-slide v-for="(doctor, index) in doctors" :key="index">
        <div class="docter-list-item-inner rounded text-center">
            <div class="donter-profile">
                <img :src="generateImgPath(`/assets/images/user/${doctor.image}`)"
                    class="img-fluid rounded-circle" alt="user-img" />
            </div>
            <div class="doctor-detail mt-3">
                <h5></h5>
                <h6></h6>
            </div>
            <hr>
            <div class="doctor-description">
                <p class="mb-0 text-center ps-2 pe-2"></p>
            </div>
        </div>
    </swiper-slide>
  </swiper>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { ref, reactive } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper';

const generateImgPath = (path) => {
return window.origin + import.meta.env.BASE_URL + path;
};

const doctors = [
{ name: 'Dr. Paul Molive', role: 'Doctor', hospital: 'California Hospital Medical Center', image: '05.jpg' },
{ name: 'Dr. Paul Molive', role: 'Nurse', hospital: 'California Hospital Medical Center', image: '06.jpg' },
{ name: 'Dr. Paul Molive', role: 'Surgeon', hospital: 'California Hospital Medical Center', image: '07.jpg' },
{ name: 'Dr. Paul Molive', role: 'Doctor', hospital: 'California Hospital Medical Center', image: '08.jpg' },
{ name: 'Dr. Paul Molive', role: 'Surgeon', hospital: 'California Hospital Medical Center', image: '09.jpg' },
{ name: 'Dr. Paul Molive', role: 'OT Assistant', hospital: 'California Hospital Medical Center', image: '10.jpg' },
];
</script>