import Image from "next/image";
import React from "react";

const GuestReviews = () => {
  const guestReviewsData = [
    {
      name: "Andrea",
      month: "October 2023",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
    },
    {
      name: "Andrea",
      month: "October 2023",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
    },
    {
      name: "Andrea",
      month: "October 2023",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
    },
    {
      name: "Andrea",
      month: "October 2023",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
    }
  ];
  return (
    <>
      <section className="guest-reviews-session">
        <div className="container">
          <div className="row">
            <div className="col-md-10">
              <div className="row">
                <div className="col-12">
                  <div className="head-btn">
                    <div className="head01">
                      <div className="title">Guest reviews</div>
                    </div>
                    <a href="" className="view-all-reviews-btn">
                      View All Reviews
                    </a>
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col-12">
                  <div className="product-reviews">
                    <span className="rating">8.8</span>
                    <span>Fabulous </span>
                    <span className="review">1,365 Reviews</span>
                  </div>
                </div>
              </div>
              <div className="row">
                {guestReviewsData &&
                  guestReviewsData.map(data => {
                    return (
                      <div className="col-md-6">
                        <div className="guest-reviews-detail">
                          <div className="head">
                            <div className="name">{data.name}</div>
                            <div className="month">{data.month}</div>
                          </div>
                          <div className="star">
                            <a href="">
                              <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                              </span>
                            </a>
                            <a href="">
                              <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                              </span>
                            </a>
                            <a href="">
                              <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                              </span>
                            </a>
                            <a href="">
                              <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                              </span>
                            </a>
                            <a href="">
                              <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                              </span>
                            </a>
                          </div>
                          <div className="review-content">
                            “{data.description}
                            <a href="">Read More</a>
                          </div>
                        </div>
                      </div>
                    );
                  })}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default GuestReviews;