import Title from "@/components/Title";
import styles from "../styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import ReviewsCount from "@/components/CompatibilityV2/components/ReviewsCount";
import StatisticsItem from "@/components/CompatibilityV2/components/StatisticsItem";
import SoulmatesSVG from "@/components/CompatibilityV2/images/SVG/Soulmates";
import HeartSVG from "@/components/CompatibilityV2/images/SVG/Heart";
import Review2 from "@/components/CompatibilityV2/components/Review2";
import { images } from "@/components/CompatibilityV2/data";
import Button from "@/components/CompatibilityV2/components/Button";

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

function ReviewV1({ handleNext }: IReviewV1Props) {
  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}>
        <ReviewsCount />
        <div className={styles.statistics}>
          <StatisticsItem
            title={translate("/review.soulmates_count")}
            text={translate("/review.soulmates_today")}
            image={<SoulmatesSVG />}
          />
          <StatisticsItem
            title={translate("/review.trusted_count")}
            text={translate("/review.trusted")}
            image={<HeartSVG />}
          />
        </div>
        <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.button} onClick={handleNext}>
        {translate("/review.button")}
      </Button>
    </div>
  );
}

export default ReviewV1;
