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

interface ExchangePolicyData {
  exchange_policy?: string;
}



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

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

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

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

  return (
    <section className="py-[50px]">
      <div className="container mx-auto p-3">
        {/* <Title title="delivery-title" main="Delivery" /> */}
        <h2 className="text-[#184363] text-[24px] sm:text-[28px] font-[700] capitalize mb-[15px]">
      {t('delivery-information')}
    </h2>

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