"use client";
import React, { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { getSettingBySlug } from "@/lib/actions/globalSettingsActions";
import { toast, ToastContainer } from "react-toastify";
import { getStoredLocale } from "@/lib/getLocale";

export default function TermsConditions() {
  const t = useTranslations();
  const [termsConditions, setTermsConditions] = useState<any>(null);
  const locale = getStoredLocale();

  useEffect(() => {
    (async () => {
      try {
        const slug = "terms-and-conditions";
        const terms = await getSettingBySlug(slug);
        setTermsConditions(terms?.data?.setting);
      } catch (error: any) {
        toast.error(
          error?.response?.data?.message ||
            t("validation.error_getting_terms_conditions")
        );
      }
    })();
  }, [locale]);

  return (
    <>
      <ToastContainer />
      <div className="mb-5">
        <h2 className="text-4xl font-bold mb-2">
          {termsConditions?.display_name || t("terms.terms_conditions_title")}
        </h2>
        <div
          className="text-neutrals600 text-sm"
          dangerouslySetInnerHTML={{
            __html: termsConditions?.value || t("terms.terms_conditions_description"),
          }}
        />
      </div>
    </>
  );
}