import { useEffect, useState } from 'react';
import FAQDiscord from './partials/FAQDiscord.jsx';
import Features from './partials/Features.jsx';
import Footer from './partials/Footer.jsx';
import Hero from './partials/Hero.jsx';

const Home = ({ faqData }) => {
    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] bg-neutral-50 pb-10 dark:bg-black">
            <div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
                {isClient && Editor ? (
                    <Editor />
                ) : (
                    <div className="flex h-96 items-center justify-center">
                        <div className="text-muted-foreground">Loading editor...</div>
                    </div>
                )}
            </div>
            <div className="space-y-16 pt-6">
                <Hero />
                <Features />
                <FAQDiscord faqData={faqData} />
            </div>
            <Footer />
            {/* <AuthUser /> */}
        </div>
    );
};

export default Home;