import { useTranslation } from "react-i18next";
import { FaFacebook, FaLinkedin } from "react-icons/fa";

const Footer = () => {
  const { t, i18n } = useTranslation();

  return (
    <footer className="flex flex-col space-y-10 justify-center m-10">
      <div className="flex justify-center space-x-5">
        <a
          href="https://www.facebook.com/people/LK-Marketing/61556714037746/"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FaFacebook className="text-gold-light" size={30} />
        </a>
        <a
          href="https://www.linkedin.com/company/lk-results"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FaLinkedin className="text-gold-light" size={30} />
        </a>
        {/* Uncomment these lines if you want to include Instagram and Twitter icons */}
        {/* <a
          href="https://instagram.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FaInstagram className="text-gold-light" size={30} />
        </a>
        <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
          <FaXTwitter className="text-gold-light" size={30} />
        </a> */}
      </div>

      <div className="flex justify-center space-x-5">
        <a
          href="/tos"
          className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
        >
          {t("footer.tos")}
        </a>
        <a
          href="/privacy"
          className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
        >
          {t("footer.privacy")}
        </a>
      </div>

      <p className={i18n.language === "en" ? "footer-text text-center" : "footer-text-pt text-center"}>
        {t("footer.rights")}
      </p>
    </footer>
  );
};

export default Footer;

