"use client";

import { Loader2 } from "lucide-react";
import { useEffect, useState } from "react";

const HomeBottom = () => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    const fetchHomeBottomData = async () => {
      try {
        const res = await fetch("/api/footerSection/homeBottom", {
          cache: "no-store",
        });

        if (!res.ok) {
          if (res.status === 404) return setData(null);
          throw new Error("Failed to fetch Home Bottom data");
        }

        const result = await res.json();

        console.log(result)

        setData(result?.description ?? null);
      } catch (error) {
        console.error("Error fetching Home Bottom data:", error);
      }
    };

    fetchHomeBottomData();
  }, []);

  if (!data) {
    return (
      <div className="flex justify-center my-10">
        <Loader2 className="animate-spin h-6 w-6" />
      </div>
    );
  }

  return (
    <section
      className="prose max-w-none p-2 mb-10"
      dangerouslySetInnerHTML={{ __html: data }}
    />
  );
};

export default HomeBottom;