import { palmistryV1Prefix } 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.EmailMarketingPalmistryV2);
  const reviews: IReviewProps[] = useMemo(
    () => [
      {
        avatar: `${palmistryV1Prefix}/reviews/rebecca.png`,
        username: translate("trial-payment.reviews_username1"),
        date: "01/03/2025",
        gender: "female",
        text: translate("trial-payment.reviews_text1"),
      },
      {
        avatar: `${palmistryV1Prefix}/reviews/mika.png`,
        username: translate("trial-payment.reviews_username2"),
        date: "07/03/2025",
        gender: "female",
        text: translate("trial-payment.reviews_text2"),
      },
      {
        avatar: `${palmistryV1Prefix}/reviews/amanda.png`,
        username: translate("trial-payment.reviews_username3"),
        date: "16/02/2025",
        gender: "female",
        text: translate("trial-payment.reviews_text3"),
      },
    ],
    [translate]
  );

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

export default Reviews;
