import routes from "@/routes";
import styles from "./styles.module.scss";
import Title from "@/components/Title";
import Button from "../../components/Button";
import Policy from "@/components/Policy";
import { useTranslations } from "@/hooks/translations";
import { useNavigate } from "react-router-dom";
import { ELocalesPlacement } from "@/locales";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";

function PalmsInformation() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const navigate = useNavigate();
  const { animationData } = useLottie({
    loadKey: ELottieKeys.handSymbols
  });

  return (
    <div className={styles["page-container"]}>
      {animationData && (
        <DotLottieReact
          className={`${styles["lottie-animation"]} ym-hide-content`}
          data={animationData}
          autoplay
          loop={false}
          width={1920}
        />
      )}
      <Title variant="h2" className={styles.title}>
        {translate("/palms-information.title")}
      </Title>
      <Button onClick={() => navigate(routes.client.palmistryV1WhatAspects())}>
        {translate("next")}
      </Button>
      <Policy>
        {translate("privacy_policy", {
          eulaLink: (
            <a
              href="https://aura.wit.life/terms"
              target="_blank"
              rel="noopener noreferrer"
            >
              {translate("eula_link")}
            </a>
          ),
          privacyLink: (
            <a
              href="https://aura.wit.life/privacy"
              target="_blank"
              rel="noopener noreferrer"
            >
              {translate("privacy_notice")}
            </a>
          ),
          clickHere: (
            <a
              href="https://aura.wit.life/"
              target="_blank"
              rel="noopener noreferrer"
            >
              {translate("policy_here")}
            </a>
          ),
        })}
      </Policy>
    </div>
  );
}

export default PalmsInformation;
