/* The AllReviewSection component displays a list of reviews for a property. */
import React from "react";
import styles from "./AllReviewSection.module.scss"
import reviewStar from "../../../public/images/icon-star.svg"
import reviewEmptyStar from "../../../public/images/icon-empty-star.svg"
import reviewHalfStar from "../../../public/images/icon-half-star.svg"
import Image from "next/image";

// Define the props for the AllReviewSection component
interface ReviewSectionProps {
  type?: number;
}

const AllReviewSection: React.FC<ReviewSectionProps> = ({ type }) => {
  const AllReviewArray = [
    {
      reviwerName: "Jessica J.",
      reviewDate: "11 Jan",
      reviewDesc: "I stayed in this flat for 3 months, and overall, it was a great experience. The location is perfect, right in the heart of the city, with easy access to public transportation, cafes, and shops. The living room was spacious and full of natural light, which made it feel very welcoming. The kitchen was well-equipped, which made cooking enjoyable."
    },
    {
      reviwerName: "Jessica J.",
      reviewDate: "11 Jan",
      reviewDesc: "I stayed in this flat for 3 months, and overall, it was a great experience. The location is perfect, right in the heart of the city, with easy access to public transportation, cafes, and shops. The living room was spacious and full of natural light, which made it feel very welcoming. The kitchen was well-equipped, which made cooking enjoyable."
    },
    {
      reviwerName: "Jessica J.",
      reviewDate: "11 Jan",
      reviewDesc: "I stayed in this flat for 3 months, and overall, it was a great experience. The location is perfect, right in the heart of the city, with easy access to public transportation, cafes, and shops. The living room was spacious and full of natural light, which made it feel very welcoming. The kitchen was well-equipped, which made cooking enjoyable."
    }
  ];
  return (
    // Main wrapper of reviews section
    <div className={`w-full ${styles.allReviewWrapper} flex flex-col gap-2`}>
      {/* Title wrapper */}
      <div className={`${styles.titleWrapper} flex items-center gap-3`}>
        <h5 className={`w-fit mb-0`}>Reviews and ratings</h5>
        <span className={`inline-flex rounded-[200px] px-3 py-[6px] text-center fs-14`}>256</span>
      </div>
      {/* Main tot review box */}
      <div className={`${styles.totalReviewBox} flex items-center gap-3 relative mb-2`}>
        <h2 className={`w-fit mb-0`}>4,7</h2>
        {/* Total star box */}
        <div className={`${styles.totalStarBox} flex flex-col gap-1`}>
          <div className={`w-fit flex flex-wrap gap-1`}>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewStar} alt="star-icon" />
            </span>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewStar} alt="star-icon" />
            </span>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewStar} alt="star-icon" />
            </span>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewHalfStar} alt="star-icon" />
            </span>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewEmptyStar} alt="star-icon" />
            </span>
          </div>
          <span className={`fs-14`}>Based on 256 reviews</span>
        </div>
        {type === 1 ? (
          <a className={`${styles.roundedArrowBtn} w-[44px] h-[44px] rounded-full flex items-center justify-center absolute right-0`} href="/blankbase/all-reviews">
            <i className={`icon icon-right-arrow w-[20px] h-[20px] -rotate-45`}></i>
          </a>) : null}
      </div>
      {/* Review dynamic array */}
      {AllReviewArray.map((item, i) => (
        <div className={`${styles.singleReviewBox} p-3 gap-3 rounded-xl flex flex-col`} key={i}>
          <div className={`${styles.reviwerNameBox} flex justify-between items-center gap-2`}>
            <p className={`fs-14 mb-0`}>{item.reviwerName}</p>
            <p className={`fs-14 mb-0 ${styles.reviewDate}`}>{item.reviewDate}</p>
          </div>
          <div className={`w-fit flex flex-wrap gap-1`}>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewStar} alt="star-icon" />
            </span>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewStar} alt="star-icon" />
            </span>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewStar} alt="star-icon" />
            </span>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewHalfStar} alt="star-icon" />
            </span>
            <span className={`w-5 h-5 block`}>
              <Image width={20} height={20} src={reviewEmptyStar} alt="star-icon" />
            </span>
          </div>
          <p className={`fs-14 mb-0 ${styles.reviewPara}`}>{item.reviewDesc}</p>
        </div>
      ))}
    </div>
  );

};

export default AllReviewSection;