import { useTranslations } from "next-intl";

import { Typography } from "@/components/ui";
import { emailMarketingCompV2Images } from "@/shared/constants/images";
import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";

import Review, { IReviewProps } from "../Review/Review";

import styles from "./Reviews.module.scss";

type IReviewFromTranslate = Omit<IReviewProps, "stars" | "avatar">;

type ILocalReview = Pick<IReviewProps, "stars" | "avatar">;

export default function Reviews() {
  const t = useTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.reviews")
  );

  const reviewsFromTranslate = Object.values(
    t.raw("items") as Record<string, IReviewFromTranslate>
  );

  const reviews: ILocalReview[] = [
    {
      avatar: emailMarketingCompV2Images("anna_smith28.png"),
    },
    {
      avatar: emailMarketingCompV2Images("mike_andrews_89.png"),
    },
    {
      avatar: emailMarketingCompV2Images("emily_harris_ang.png"),
    },
  ];

  const mergedReviews: IReviewProps[] = reviewsFromTranslate.map((item, i) => ({
    ...item,
    ...(reviews[i] || {}),
  }));

  return (
    <div className={styles.container}>
      <Typography as="h2" align="left" className={styles.title}>
        {t("title")}
      </Typography>
      <div className={styles.reviews}>
        {mergedReviews.map((review, index) => (
          <Review {...review} key={index} />
        ))}
      </div>
    </div>
  );
}
