"use client";
import React from "react";
import { useGetPolicyQuery } from "../store/api/GetPrivacyPolicyTermsConditions";
import Cookies from "js-cookie";
import { ClipLoader } from "react-spinners";
import { MdOutlineArrowBackIos } from "react-icons/md";
import TextTranslate from "../utils/TextTranslate";

interface Props {
  onBack: () => void;
}

const PrivacyPolicy: React.FC<Props> = ({ onBack }) => {
  const token = Cookies.get("Snapta_auth_token");
  const { data, isLoading } = useGetPolicyQuery({ token: token || "" });
  const privacyPolicyHTML = data?.privacy_policy;

  return (
    <div
      className="bg-[var(--bg-primary)] rounded-lg sm:p-6 p-4 lg:w-[90%] 2xl:w-[70%] w-[95%] h-auto  shadow-lg"
      style={{ boxShadow: "0px 1px 11.9px 0px #0000000F" }}
    >
      {/* Header Section */}
      <div
        className="flex gap-2 items-center cursor-pointer  bg-[var(--bg-primary)] z-10 pb-2"
        onClick={onBack}
      >
        <MdOutlineArrowBackIos className="sm:hidden text-[var(--text-primary)]" />
        <h2 className="font-gilroy_semibold text-2xl py-3 font-semibold text-[var(--text-primary)]">
          <TextTranslate text="Privacy Policy" />
        </h2>
      </div>

      {isLoading ? (
        <div className="flex justify-center items-center py-60">
          <ClipLoader
            loading={isLoading}
            size={20}
            data-testid="loader"
            aria-label="Loading Spinner"
            color="var(--text-primary)"
          />
        </div>
      ) : (
        <div className="py-2">
          {/* dangerouslySetInnerHTML requires careful styling for nested HTML. 
            'prose-invert' is added for Dark Mode compatibility if you use Tailwind Typography.
          */}
          <div
            dangerouslySetInnerHTML={{ __html: privacyPolicyHTML || "" }}
            className="prose max-w-none text-[var(--text-primary)] font-gilroy_regular dark:prose-invert 
            prose-headings:text-[var(--text-primary)] prose-p:text-[var(--text-secondary)] 
            prose-strong:text-[var(--text-primary)] prose-li:text-[var(--text-secondary)]"
          ></div>
        </div>
      )}
    </div>
  );
};

export default PrivacyPolicy;