"use client";

import React, { useEffect, useState } from "react";
import FooterContent from "./FooterContent";

export default function Footer({ 
  showCallToAction = true,
  initialData 
}: { 
  showCallToAction?: boolean,
  initialData?: any
}) {
  const [data, setData] = useState<any>(initialData || null);
  const [loading, setLoading] = useState(!initialData);

  useEffect(() => {
    if (initialData) return;

    async function fetchFooter() {
      try {
        const res = await fetch(
          `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/store/pages/footer`,
          {
            method: "GET",
            headers: {
              "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
            },
            cache: "no-store"
          }
        );

        if (!res.ok) {
          throw new Error("Failed to fetch Footer data");
        }

        const json = await res.json();
        setData(json);
      } catch (error) {
      } finally {
        setLoading(false);
      }
    }

    fetchFooter();
  }, [initialData]);

  if (loading) {
    return <div className="min-h-[200px]" />;
  }

  if (!data) return null;

  return <FooterContent showCallToAction={showCallToAction} data={data} />;
}