import { CustomCarouselMain } from '@/views/carousel/EmblaCarousel';
import UserImg from '@/views/image/UserImg';

const testimonials = [
  {
    name: "Ananya S.",
    gender: 'F',
    img: "https://example.com/ananya.jpg",
    des: "I have been using ayodhya.com for several months now, and I am incredibly impressed with the quality of service and user experience. The website is easy to navigate, and I always find what I need quickly. The customer support team is responsive and helpful, making my shopping experience seamless and enjoyable. Highly recommended!"
  },
  {
    name: "Rajesh P.",
    gender: 'M',
    img: "https://example.com/rajesh.jpg",
    des: "ayodhya.com has been my go-to website for all my needs. The range of products and services offered is outstanding, and the prices are unbeatable. I appreciate the detailed product descriptions and reviews, which help me make informed decisions. The delivery is always prompt, and the packaging is secure. I am a very satisfied customer!"
  },
  {
    name: "Priya G.",
    gender: 'F',
    img: "https://example.com/priya.jpg",
    des: "I recently discovered ayodhya.com, and it has exceeded my expectations in every way. The website design is clean and user-friendly, making it easy to find exactly what I am looking for. "
  }
];

const Testimonial = () => {

  return (
    <div className="container-fluid mt-5">
      <h2 className="mb-3 text-center"><b>Testimonial</b></h2>
      <div className="mt-4" style={{ overflowX: 'hidden' }}>
        <div className="carousel-container">
          <CustomCarouselMain>
            {testimonials.map((testimonial, index) => (
              <TestimonialSlide key={index} testimonial={testimonial} />
            ))}

          </CustomCarouselMain>

        </div>
      </div>
    </div>
  );
}

export default Testimonial;

const TestimonialSlide = ({ testimonial }: { testimonial: any }) => {
  return (
    <div className='testi-slide-box m-2'>
      <p>{testimonial.des}</p>
      <div className='d-flex mt-4'>
        <div>
          <UserImg url={testimonial.img} gender={testimonial.gender} alt={testimonial.name}
            className='img-fluid testi-img-icon'
          />
        </div>
        <h6 className='ms-3 mt-3'><b>{testimonial.name}</b></h6>
      </div>
    </div>
  );
}