import Title from "@/components/Title";
import styles from "../styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import Review2 from "@/components/CompatibilityV2/components/Review2";
import { images } from "@/components/CompatibilityV2/data";
import Button from "@/components/CompatibilityV2/components/Button";

interface IReviewV2Props {
  handleNext: () => void;
}

function ReviewV2({ handleNext }: IReviewV2Props) {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);

  return (
    <div className={styles.container}>
      <Title variant="h1" className={styles.title}>
        {translate("/review.title", {
          color: (
            <span className={styles.title_color}>
              {translate("/review.title_color")}
            </span>
          ),
        })}
      </Title>
      <div className={styles.content}>
        <Review2
          username={translate("/review.review.username")}
          text={translate("/review.review.text")}
          verifiedText={translate("/review.review.verified_user")}
          likesText={translate("/review.review.likes")}
          likesImages={[
            images("review/like_1.png"),
            images("review/like_2.png"),
            images("review/like_3.png"),
          ]}
          image={images("review/avatar.jpg")}
        />
        <img
          className={styles.partners}
          src={images("review/partners.png")}
          alt="partners"
        />
      </div>
      <Button className={styles.buttonV2} onClick={handleNext}>
        {translate("/review.button")}
      </Button>
    </div>
  );
}

export default ReviewV2;
