"use client";

import React, { useState, useEffect } from "react";
import Title from "@/components/titlePage";
import AlertComponent from "@/components/alert";
import { Skeleton } from "antd";
import { store } from "@/store/store";
import axios from "@/utils/axios-config";
import { useTranslations } from "next-intl";
interface PrivacyPolicyData {
  privacy_policy?: string;
}

export default function PrivacyPage() {
  const language = "en";
  const [data, setData] = useState<PrivacyPolicyData | 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/privacy_policy`);

        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="privacy-title" main="Privacy" />

        {error ? (
          <AlertComponent
            message="privacy-error"
            desc="privacy-error-desc"
            main="Privacy"
          />
        ) : 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?.privacy_policy || "Content is currently unavailable."}
          // </p>
          <div
            dangerouslySetInnerHTML={{
              __html: data?.privacy_policy || t("content-unavailable"),
            }}
          />
        )}
      </div>
    </section>
  );
}