import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import routes from "@/routes";
import styles from "./styles.module.css";
import MainButton from "../MainButton";
import Title from "../Title";
import { useApi, useApiCall } from "@/api";
import { useCallback } from "react";
import { Asset } from "@/api/resources/Assets";

function FeedbackPage(): JSX.Element {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const api = useApi();
  const handleNext = () => navigate(routes.client.freePeriodInfo());

  const assetsData = useCallback(async () => {
    const { assets } = await api.getAssets({ category: String("au") });
    return assets;
  }, [api]);

  const {
    data: assets,
    // isPending
  } = useApiCall<Asset[]>(assetsData);

  const reviews = [
    {
      title: t("aura.name_1.review"),
      text: t("aura.review_1.content"),
      imageKey: "au.1.avatar",
    },
    {
      title: t("aura.name_2.review"),
      text: t("aura.review_2.content"),
      imageKey: "au.2.avatar",
    },
  ];

  return (
    <section className={`${styles.page} page`}>
      <div className={styles.reviews}>
        {reviews.map(({ title, text, imageKey }, index) => (
          <div className={styles.review} key={index}>
            <div className={styles.images}>
              <img
                className={styles["profile-picture"]}
                src={assets?.find((asset) => asset.key === imageKey)?.url}
                alt="profile picture"
              />
              <div className={styles["header-container"]}>
                <Title variant="h3">{title}</Title>
                <img className={styles.stars} src="/5-stars.png" alt="stop" />
              </div>
            </div>
            <p className={styles.text}>{text}</p>
          </div>
        ))}
      </div>
      <MainButton onClick={handleNext}>{t("next")}</MainButton>
    </section>
  );
}

export default FeedbackPage;