import { useEffect, useState } from "react";
import Modal from "../elements/Modal";
import useAxios from "@/hooks/useAxios";

type AuthRulesProps = {
  isSetting?: boolean;
  isModalOpen: boolean;
  setModalOpen: (value: boolean) => void; // به جای any از تایپ مشخص استفاده شده
};

function AuthRules({ isModalOpen, setModalOpen, isSetting }: AuthRulesProps) {
  const [rules, setRules] = useState<string>("");

  const { request, loading, error } = useAxios();

  const fetchData = async () => {
    try {
      const data = await request<{ value: string }>(
        "GET",
        "/settings/terms-and-conditions"
      );
      setRules(data?.value || "");
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    if (isModalOpen) {
      fetchData();
    }
  }, [isModalOpen]);

  return (
    <Modal
      isOpen={isModalOpen}
      onClose={() => setModalOpen(false)}
      height="500px"
    >
      <div className={`${isSetting ? "pb-20" : ""}`}>
        {loading ? (
          <p>در حال بارگذاری...</p>
        ) : error ? (
          <p>خطا در دریافت اطلاعات</p>
        ) : (
          <div
            dangerouslySetInnerHTML={{
              __html: rules,
            }}
          />
        )}
      </div>
    </Modal>
  );
}

export default AuthRules;
