"use client"

import React, { useEffect, useState } from "react";
export const dynamic = 'force-dynamic';


export default function MarketplaceClient() {
    const [marketplaceData, setMarketplaceData] = useState<footerSectionType | null>(null);

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

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

            const data = await res.json();

            // console.log(data)

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

    useEffect(() => {
        fetchMarketplaceData();
    }, []);
    return (
        <div className="min-h-screen flex flex-col bg-gray-50">
            {/* Header */}
            <header className="bg-purple-600 text-white py-8 text-center">
                <h1 className="text-3xl font-bold">Marketplace</h1>
                <p className="mt-2 text-lg">
                    Discover tools and integrations to power 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">

                        {marketplaceData ? (
                            <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: marketplaceData.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>
    );
}