"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 gap-3">
        {/* Hak Cipta */}
        <div className="text-center md:text-left">
          {t("copyright", { defaultValue: "Copyright" })} &copy; {new Date().getFullYear()}{" "}
          {t("publicRelation", { defaultValue: "Public Relation" })} {t("reserved", { defaultValue: "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", { defaultValue: "Feedback" })}
          </Link>
          <span className="hidden md:inline-block ">|</span>
          <Link
            href={generateLocalizedPath("/contact", String(locale))}
            className="hover:underline"
          >
            {t("contact", { defaultValue: "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", { defaultValue: "Privacy" })}
              </a>
            </DialogTrigger>
            <DialogContent
              className="flex flex-col overflow-y-scroll h-[80%]"
              size="md"
              data-lenis-prevent
            >
              <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", { defaultValue: "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;