import EditorSkeleton from '@/components/editor/EditorSkeleton.jsx';
import { useEffect, useState } from 'react';
import BrandLogo from './partials/BrandLogo.jsx';
import FAQDiscord from './partials/FAQDiscord.jsx';
import Features from './partials/Features.jsx';
import Footer from './partials/Footer.jsx';
import Hero from './partials/Hero.jsx';
import MemeLibrarySearch from './partials/MemeLibrarySearch.jsx';

const Home = ({ faqData, popularKeywords }) => {
    const [isClient, setIsClient] = useState(false);
    const [Editor, setEditor] = useState(null);

    useEffect(() => {
        setIsClient(true);
        // Dynamically import Editor only on client-side to avoid SSR issues with Konva
        if (typeof window !== 'undefined') {
            import('@/modules/editor/editor.jsx').then((module) => {
                setEditor(() => module.default);
            });
        }
    }, []);

    return (
        <div className="min-h-[100vh] space-y-0 bg-neutral-50 py-6 dark:bg-black">
            <BrandLogo className="pb-2" />
            <div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
                {isClient && Editor ? <Editor /> : <EditorSkeleton />}
            </div>
            <div className="space-y-16">
                <Hero />
                <MemeLibrarySearch popularKeywords={popularKeywords} />
                <Features />
                <FAQDiscord faqData={faqData} />
            </div>
            <Footer />
            {/* <AuthUser /> */}
        </div>
    );
};

export default Home;
