"use client";

import React, { useState, useEffect } from "react";
import Title from "@/components/titlePage";
import AlertComponent from "@/components/alert";
import { useTranslations } from "next-intl";
import { Skeleton } from "antd";
import axios from "@/utils/axios-config";

interface TermsData {
  terms?: string;
}
import { store } from "@/store/store";


export default function TermsPage() {
  const language = "en";
  const [data, setData] = useState<TermsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  const t = useTranslations();

  useEffect(() => {
    const fetchPrivacyPolicyData = async () => {
      try {
        const response = await axios.get(`/settings/terms`);

        const data = await response?.data?.data;

        setData(data);
      } catch (err: any) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchPrivacyPolicyData();
  }, []);

  return (
    <section className="py-[50px]">
      <div className="container mx-auto p-3">
        <Title title="terms-title" main="Terms" />

        {error ? (
          <AlertComponent
            message="terms-error"
            desc="terms-error-desc"
            main="Terms"
          />
        ) : loading ? (
          <div className="space-y-4">
            <Skeleton active paragraph={{ rows: 4 }} /> 
          </div>
        ) : (
          // <p className="text-[#000000] text-[16px] sm:text-[20px] font-[400] leading-[1.6] tracking-[0.7px]">
          //   {data?.terms || "Content is currently unavailable."}
          // </p>
           <div dangerouslySetInnerHTML={{ __html: data?.terms || t('content-unavailable')  }} />
        )}
      </div>
    </section>
  );
}