data fetch in testimonial section

src/components/TestimonialsSection.tsx

@@ -4,6 +4,7 @@ import { Star, ChevronLeft, ChevronRight, Quote } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import useEmblaCarousel from 'embla-carousel-react';
 import Autoplay from 'embla-carousel-autoplay';
+import { useReviews } from '@/hooks/queires/useReviews';
 
 const testimonials = [
   {
@@ -49,6 +50,11 @@ const testimonials = [
 ];
 
 export default function TestimonialsSection() {
+
+  const {data: reveiwsData} = useReviews();
+
+  const testimonials = reveiwsData?.data.data;
+
   const [emblaRef, emblaApi] = useEmblaCarousel(
     { loop: true, align: 'center' },
     [Autoplay({ delay: 5000, stopOnInteraction: false })]
@@ -123,9 +129,9 @@ export default function TestimonialsSection() {
           {/* Carousel Container */}
           <div className="overflow-hidden" ref={emblaRef}>
             <div className="flex">
-              {testimonials.map((testimonial, index) => (
+              {testimonials?.map((testimonial, index) => (
                 <div
-                  key={testimonial.id}
+                  key={testimonial._id}
                   className="flex-[0_0_100%] min-w-0 px-4 md:flex-[0_0_80%] lg:flex-[0_0_60%]"
                 >
                   <motion.div
@@ -144,7 +150,7 @@ export default function TestimonialsSection() {
 
                     {/* Stars */}
                     <div className="flex gap-1 mb-6">
-                      {[...Array(testimonial.rating)].map((_, i) => (
+                      {[...Array(testimonial.rating)]?.map((_, i) => (
                         <Star
                           key={i}
                           className="w-5 h-5 fill-primary text-primary"
@@ -154,22 +160,22 @@ export default function TestimonialsSection() {
 
                     {/* Quote */}
                     <p className="text-lg md:text-xl text-foreground/90 mb-8 leading-relaxed">
-                      "{testimonial.quote}"
+                      "{testimonial.review}"
                     </p>
 
                     {/* Author */}
                     <div className="flex items-center gap-4">
                       <img
-                        src={testimonial.avatar}
-                        alt={testimonial.name}
+                        src={testimonial.thumbnail}
+                        alt={testimonial.client_name}
                         className="w-14 h-14 rounded-full object-cover border-2 border-primary/50"
                       />
                       <div>
                         <h4 className="font-bold text-foreground">
-                          {testimonial.name}
+                          {testimonial.client_name}
                         </h4>
                         <p className="text-sm text-muted-foreground">
-                          {testimonial.role}
+                          {testimonial.designation}
                         </p>
                       </div>
                     </div>
@@ -181,7 +187,7 @@ export default function TestimonialsSection() {
 
           {/* Dots Indicator */}
           <div className="flex justify-center gap-2 mt-8">
-            {testimonials.map((_, index) => (
+            {testimonials?.map((_, index) => (
               <button
                 key={index}
                 onClick={() => emblaApi?.scrollTo(index)}