import { compatibilityV2Prefix } from "@/routes";
import Review, { IReviewProps } from "../Review";
import styles from "./styles.module.scss";
import { useMemo } from "react";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function Reviews() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const reviews: IReviewProps[] = useMemo(
    () => [
      {
        avatar: `${compatibilityV2Prefix}/reviews/rebecca.png`,
        username: translate("/trial-payment.reviews.username1"),
        // tagline: translate("/trial-payment.reviews.tagline1"),
        text: translate("/trial-payment.reviews.text1"),
        date: translate("/trial-payment.reviews.date1")
      },
      {
        avatar: `${compatibilityV2Prefix}/reviews/mika.png`,
        username: translate("/trial-payment.reviews.username2"),
        // tagline: translate("/trial-payment.reviews.tagline2"),
        text: translate("/trial-payment.reviews.text2"),
        date: translate("/trial-payment.reviews.date2")
      },
      // {
      //   avatar: `${compatibilityV2Prefix}/reviews/amanda.png`,
      //   username: translate("/trial-payment.reviews.username3"),
      //   // tagline: translate("/trial-payment.reviews.tagline3"),
      //   text: translate("/trial-payment.reviews.text3"),
      //   date: translate("/trial-payment.reviews.date3")
      // },
    ],
    [translate]
  );

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

export default Reviews;
