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 { images } from "../../data";

function Reviews() {
  const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);
  const reviews: IReviewProps[] = useMemo(
    () => [
      {
        avatar: images("andi36_11.png"),
        username: "@andi36_11",
        date: "03/05/2025",
        gender: "male",
        text: translate("marketing-landing.review-1"),
      },
      {
        avatar: images("aramaska.png"),
        username: "@aramaska",
        date: "02/17/2025",
        gender: "female",
        text: translate("marketing-landing.review-2"),
      },
      {
        avatar: images("patterso.png"),
        username: "@patterso",
        date: "01/01/2025",
        gender: "female",
        text: translate("marketing-landing.review-3"),
      },
    ],
    [translate]
  );

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

export default Reviews;
