"use client";

import { useEffect, useState } from "react";
import { getPrivacy } from "@/service/landing/landing";
import parse from "html-react-parser";
import { useTranslations } from "next-intl";

export default function PrivacyPolicyPage() {
  const [privacy, setPrivacy] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const t = useTranslations("LandingPage");

  useEffect(() => {
    async function fetchPrivacy() {
      try {
        const response = await getPrivacy();
        setPrivacy(response?.data?.data?.htmlContent || "");
      } catch (error) {
        console.error("Failed to load privacy policy", error);
      } finally {
        setLoading(false);
      }
    }

    fetchPrivacy();
  }, []);

  return (
    <div className="container mx-auto max-w-4xl px-4 py-10">
      <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>
      {loading && (
        <p className="text-muted-foreground"> {t("loadPriv", { defaultValue: "Loading privacy policy..." })}</p>
      )}

      {!loading && privacy && (
        <div className="prose prose-sm md:prose-base max-w-none dark:prose-invert">
          {parse(privacy)}
        </div>
      )}

      {!loading && !privacy && (
        <p className="text-red-500"> {t("unavailablePriv", { defaultValue: "Privacy policy content is unavailable." })}</p>
      )}
    </div>
  );
}