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

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

function ReviewV3({ handleNext }: IReviewV3Props) {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);

  const quote =
    "“A tool that becomes your ally on the path to a harmonious relationship.”";

  return (
    <div className={styles.container}>
      <img
        className={styles.cosmoLogo}
        src={images("Cosmopolitan-Logo.png")}
        alt="COSMOPOLITAN"
      />
      <p className={styles.quote}>{quote}</p>
      <img
        className={styles.partnersV3}
        src={images("review/partners.png")}
        alt="partners"
      />
      <Button className={`${styles.buttonV2} ${styles.buttonV3}`} onClick={handleNext}>
        {translate("/review.button")}
      </Button>
    </div>
  );
}

export default ReviewV3;