"use client"

import React, { useEffect, useState } from "react";


export default function IntegrationsClient() {

  const [integrationsData, setIntegrationsData] = useState<footerSectionType | null>(null);

  const fetchIntegrationsData = async () => {
    try {
      const res = await fetch('/api/footerSection/integrations', {
        cache: 'no-store',
      });

      if (!res.ok) throw new Error('Fetch failed');

      const data = await res.json();

     // console.log(data)

      setIntegrationsData(data ?? null);
    } catch (error) {
      //console.error(error);
    }
  };

  useEffect(() => {
    fetchIntegrationsData();
  }, []);
  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      {/* Header */}
      <header className="bg-indigo-600 text-white py-8 text-center">
        <h1 className="text-3xl font-bold">Integrations</h1>
        <p className="mt-2 text-lg">
          Connect your favorite tools and services to supercharge your workflow
        </p>
      </header>

      <main className="relative -mt-16 pb-20">
        <div className="max-w-6xl mx-auto px-6">
          <div className="bg-white rounded-3xl shadow-xl p-8 md:p-12 transition-all duration-300 hover:shadow-2xl">
            
            {integrationsData ? (
              <div
                className="prose prose-lg max-w-none prose-headings:text-gray-800 prose-p:text-gray-600 prose-a:text-green-600"
                dangerouslySetInnerHTML={{
                  __html: integrationsData.description,
                }}
              />
            ) : (
              <div className="space-y-4 animate-pulse">
                <div className="h-6 bg-gray-200 rounded w-1/3" />
                <div className="h-4 bg-gray-200 rounded w-full" />
                <div className="h-4 bg-gray-200 rounded w-5/6" />
                <div className="h-4 bg-gray-200 rounded w-2/3" />
              </div>
            )}

          </div>
        </div>
      </main>


    </div>
  );
}