import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import routes from "@/routes";
import styles from "./styles.module.css";
import MainButton from "../MainButton";
import Title from "../Title";

function FeedbackPage(): JSX.Element {
  const { translate } = useTranslations();
  const navigate = useNavigate();
  const handleNext = () => navigate(routes.client.freePeriodInfo());

  const reviews = [
    {
      title: translate("aura.name_1.review"),
      text: translate("aura.review_1.content"),
    },
    {
      title: translate("aura.name_2.review"),
      text: translate("aura.review_2.content"),
    },
  ];

  return (
    <section className={`${styles.page} page`}>
      <div className={styles.reviews}>
        {reviews.map(({ title, text }, index) => (
          <div className={styles.review} key={index}>
            <div className={styles.images}>
              <div className={styles["header-container"]}>
                <Title variant="h3">{title}</Title>
                <img className={styles.stars} src="/5-stars.webp" alt="stop" />
              </div>
            </div>
            <p className={styles.text}>{text}</p>
          </div>
        ))}
      </div>
      <MainButton onClick={handleNext}>{translate("next")}</MainButton>
    </section>
  );
}

export default FeedbackPage;
