<template>
    <div id="testimonialCarousel" class="carousel slide mx-auto px-3">
        <div class="carousel-inner">
            <div v-for="(testimonial, index) in testimonials" :key="testimonial.id" class="carousel-item"
                :class="{ active: index === 0 }">
                <div class="testimonial-card shadow-sm bg-white rounded-4 p-4">
                    <div class="d-flex flex-column flex-xl-row gap-4 align-items-start align-items-xl-center">
                        <img :src="testimonial.image" class="rounded-4 object-fit-cover profile-picture"
                            alt="User Image" />
                        <div class="flex-grow-1 w-100 position-relative">
                            <div class="d-flex justify-content-between align-items-start mb-2 flex-wrap">
                                <div>
                                    <h6 class="fw-bold mb-1">{{ testimonial.name }}</h6>
                                    <small class="text-muted">{{ testimonial.designation }}</small>
                                </div>
                                <div class="d-flex align-items-center mt-2 mt-sm-0">
                                    <i v-for="i in 5" :key="i"
                                        :class="i <= testimonial.rating ? 'bi bi-star-fill text-warning me-1' : 'bi bi-star text-muted me-1'"></i>
                                    <strong class="ms-1">{{ testimonial.rating.toFixed(1) }}</strong>
                                </div>
                            </div>
                            <p class="mb-0 text-secondary">
                                {{ testimonial.description }}
                            </p>
                            <i class="bi bi-quote quote-icon fs-1 text-muted position-absolute"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Carousel controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
            <span
                class="carousel-control-icon bg-white rounded-circle shadow d-inline-flex align-items-center justify-content-center">
                <i class="bi bi-chevron-left text-primary"></i>
            </span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
            <span
                class="carousel-control-icon bg-white rounded-circle shadow d-inline-flex align-items-center justify-content-center">
                <i class="bi bi-chevron-right text-primary"></i>
            </span>
        </button>
    </div>
</template>


<style scoped lang="scss">
.quote-icon {
    font-size: 5rem !important;
    color: #F3E9FE !important;
    right: 0%;
    top: 85%;
    transform: rotate(180deg);
}

@media (max-width: 1400px) {
    .quote-icon {
        top: 30% !important;
        right: 0% !important;
    }
}

@media (max-width: 992px) {
    .quote-icon {
        top: 30% !important;
        right: 0% !important;
    }
}

@media (max-width: 576px) {
    .quote-icon {
        display: none !important;
    }
}

.profile-picture {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
}

.testimonial-card {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
}

.carousel-control-icon {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    border: 1px solid #ddd;
}

.carousel-control-prev {
    left: 15%;
    transform: translateX(-50%);
}

.carousel-control-next {
    right: 0%;
    transform: translateX(-50%);
}

@media (max-width: 1400px) {
    .carousel-control-prev {
        left: 15% !important;
    }

    .carousel-control-next {
        right: 0% !important;
    }
}

@media (max-width: 1200px) {
    .carousel-control-prev {
        top: -70% !important;
        left: 78% !important;
    }

    .carousel-control-next {
        top: -70% !important;
        right: 0% !important;
    }
}
@media (max-width: 992px) {
    .carousel-control-prev {
        top: -60% !important;
        left: 76% !important;
    }

    .carousel-control-next {
        top: -60% !important;
        right: 0% !important;
    }
}
@media (max-width: 768px) {
    .carousel-control-prev {
        top: -60% !important;
        left: 74% !important;
    }

    .carousel-control-next {
        top: -60% !important;
        right: 0% !important;
    }
}

@media (max-width: 576px) {
    .carousel-control-prev {
        top: -60% !important;
        left: 71% !important;
    }

    .carousel-control-next {
        top: -60% !important;
        right: 0% !important;
    }
}
</style>

<script setup>
import { ref, onMounted } from "vue";

let testimonials = ref([]);

onMounted(async () => {
    const response = await axios.get(`/testimonial/list`);
    testimonials.value = response.data.data?.testimonials;
});
</script>
