import { reviews } from "@/datas/reviews";

export default function GoogleReviewBox() {
  return (
    <section className="section section-lg bg-colorSection2">
      <div className="container">
        <h2 className="heading-decoration-1">
          <span className="heading-inner">What Our Residents Are Saying</span>
        </h2>
      </div>
      <div className="container container-wide">
        <div
          className="owl-carousel"
          data-items="1"
          data-md-items="2"
          data-lg-items="2"
          data-xl-items="3"
          data-dots="true"
          data-nav="false"
          data-stage-padding="0"
          data-loop="false"
          data-margin="30"
          data-mouse-drag="false"
        >
          {reviews.map((q, idx) => (
            <article key={"review" + idx} className="!flex bg-white p-12 h-full">
              <div>
                <time className="quote-modern-time" dateTime="2021">
                  {q.date}
                </time>
                <div className="quote-modern-main">
                  <p>{q.comment}</p>
                </div>
                <div className="quote-modern-meta-outer">
                  <div className="quote-modern-meta">
                    <h4 className="quote-modern-cite">{q.name}</h4>
                    <p className="quote-modern-position">{q.job_title}</p>
                  </div>
                </div>
              </div>
              <img
                className="w-[200px] h-[200px] object-cover rounded-full"
                src={q.profile_pict}
                alt=""
                width="57"
                height="57"
              />
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
