import { palmistryV1Prefix } from "@/routes";
import styles from "./styles.module.scss";
import Address from "../Address";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function Footer() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);

  return (
    <footer className={styles.footer}>
      <hr />
      <p className={styles.text}>{translate("/trial-payment.footer.text1")}</p>
      <div className={styles.links}>
        <a href="https://witlab.us" target="_blank" className={styles.link}>
          <img src={`${palmistryV1Prefix}/headphones.svg`} alt="Headphones" />
          {translate("/trial-payment.footer.text2")}
        </a>
        <a href="https://witlab.us" target="_blank" className={styles.link}>
          <img src={`${palmistryV1Prefix}/question.svg`} alt="Headphones" />
          {translate("/trial-payment.footer.text3")}
        </a>
      </div>
      <Address />
    </footer>
  );
}

export default Footer;
