import Review, { IReviewProps } from "../Review";
import styles from "./styles.module.scss";
import { useMemo } from "react";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { selectors } from "@/store";
import { useSelector } from "react-redux";

function Reviews() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
  const { relationshipStatus } = useSelector(
      selectors.selectCompatibilityV4Answers
  );
  const isSingle = relationshipStatus === "single";
  const reviews: IReviewProps[] = useMemo(
    () => {
        if (isSingle) {
            return [
                {
                    username: translate("/trial-payment.reviews.username1"),
                    text: translate("/trial-payment.reviews.text1"),
                    date: translate("/trial-payment.reviews.date1")
                }
            ]
        }
        return [
            {
                username: translate("/trial-payment.reviews.username2"),
                text: translate("/trial-payment.reviews.text2"),
                date: translate("/trial-payment.reviews.date2")
            },
            {
                username: translate("/trial-payment.reviews.username1"),
                text: translate("/trial-payment.reviews.text1"),
                date: translate("/trial-payment.reviews.date1")
            }
        ]
    },
    [translate, isSingle]
  );

  return (
    <div className={styles.container}>
      {reviews.map((review, index) => (
        <Review {...review} key={index} />
      ))}
    </div>
  );
}

export default Reviews;
