mediahub-fe/components/landing-page/footer.tsx

"use client";

import Link from "next/link";
import React, { useEffect, useState } from "react";
import { generateLocalizedPath } from "@/utils/globals";
import { useParams, usePathname, useRouter } from "next/navigation";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { getPrivacy } from "@/service/landing/landing";
import parse from "html-react-parser";
import { useTranslations } from "next-intl";
import NewsTicker from "./news-tickers";

const Footer = () => {
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const locale = params?.locale;
  const [privacy, setPrivacy] = useState();
  const t = useTranslations("LandingPage");

  useEffect(() => {
    async function initState() {
      const response = await getPrivacy();
      setPrivacy(response?.data?.data.htmlContent);
    }
    initState();
  }, []);

  return (
    <footer className="bg-[#bb3523] text-white text-xs lg:text-sm py-4 space-y-3 lg:space-y-0 h-">
      <div className="mx-auto flex flex-col md:flex-row justify-between items-center px-4">
        {/* Hak Cipta */}
        <div className="text-center md:text-left">
          {t("copyright")} &copy; {new Date().getFullYear()} {t("publicRelation")} {t("reserved")}
        </div>

        {/* Menu Links */}
        <div className="flex flex-wrap justify-center items-center space-x-3">
          <Link href={generateLocalizedPath("/feedback", String(locale))} className="hover:underline">
            {t("feedback")}
          </Link>
          <span className="hidden md:inline-block ">|</span>
          <Link href={generateLocalizedPath("/contact", String(locale))} className="hover:underline">
            {t("contact")}
          </Link>
          <span className="hidden md:inline-block">|</span>
          <Link href={generateLocalizedPath("/faqs", String(locale))} className="hover:underline">
            FAQ
          </Link>

          <Dialog>
            <DialogTrigger>
              <span className="hidden md:inline-block">|</span>
              <a href="#" className="hover:underline px-2">
                {t("privacy")}
              </a>
            </DialogTrigger>
            <DialogContent className="flex flex-col overflow-y-scroll h-[80%]" size="md">
              <div className="flex flex-row items-center justify-center gap-4">
                <img src="/assets/icon-privacy.png" alt="Privacy" />
                <p className="font-semibold text-lg">{t("privacy")}</p>
              </div>
              <div className="container text-black dark:text-white space-y-2">{parse(String(privacy))}</div>
            </DialogContent>
          </Dialog>
        </div>

        {/* Social Media Icons */}
        <div className="flex justify-center items-center space-x-3">
          <span className="text-sm">Follow Us:</span>
          <a href="#" aria-label="Facebook">
            <img src="/assets/facebook.svg" alt="Facebook" className="w-5 h-5" />
          </a>
          <a href="#" aria-label="Instagram">
            <img src="/assets/instagram.svg" alt="Instagram" className="w-5 h-5" />
          </a>
          <a href="#" aria-label="Twitter">
            <img src="/assets/twitter.svg" alt="Instagram" className="w-5 h-5" />
          </a>
          <a href="#" aria-label="TikTok">
            <img src="/assets/tiktok.svg" alt="TikTok" className="w-5 h-5" />
          </a>
          <a href="#" aria-label="YouTube">
            <img src="/assets/youtube.svg" alt="YouTube" className="w-5 h-5" />
          </a>
        </div>
      </div>
    </footer>
  );
};

export default Footer;