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

interface IFooterProps {
  version?: "v1" | "v2"
  addressVersion?: "v1" | "v2"
}

function Footer({
  version = "v1",
  addressVersion = "v1"
}: IFooterProps) {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);

  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}>
          {version === "v1" && <img src={`${compatibilityV4Prefix}/headphones.svg`} alt="Headphones" />}
          {translate("/trial-payment.footer.text2")}
        </a>
        <a href="https://witlab.us" target="_blank" className={styles.link}>
          {version === "v1" && <img src={`${compatibilityV4Prefix}/question.svg`} alt="Headphones" />}
          {translate("/trial-payment.footer.text3")}
        </a>
      </div>
      <Address version={addressVersion} />
    </footer>
  );
}

export default Footer;
