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

function ReviewPage() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const navigate = useNavigate();

  const handleNext = () => {
    navigate(routes.client.compatibilityV2Birthdate());
  };

  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={[
            "review/like_1.jpg",
            "review/like_2.jpg",
            "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 ReviewPage;