"use client";

import { useState, useEffect, Suspense } from "react";
import Loading from '../Loading'
import Footer from '../Footer'
import ContactForm from "../ContactForm";
import AboutusContent from "./AboutusContent";
import Banner from "./Banner";
import Map from "./Map";
import { CoursesProps, SettingsProps, AboutusProps } from "@/types";

const Home = ({ courses, settings, aboutus }: { courses: CoursesProps[], settings: SettingsProps, aboutus: AboutusProps[] }) => {
    const [loading, setLoading] = useState(true);
    // const [courses, setCourses] = useState<CoursesProps[]>([]);

    useEffect(() => {
        const loadCourses = async () => {
            setLoading(true);
            await new Promise(resolve => setTimeout(resolve, 300)); // 0.5 second delay
            setLoading(false);
        }; loadCourses();
    }, []);

    const startLoading = () => setLoading(true);
    const stopLoading = () => setLoading(false);

    return (
        <div className='bg-[#F2D5D5]'>
            {loading ? (
                <div className="flex justify-center items-center h-screen">
                    <Suspense fallback={<div>Loading...</div>}>
                        <Loading />
                    </Suspense>
                </div>
            ) : (
                <div>
                    <Banner />
                    <AboutusContent aboutus={aboutus} />
                    <Map settings={settings} />
                    <ContactForm startLoading={startLoading} stopLoading={stopLoading} />
                    <Footer settings={settings} />
                </div>
            )}
        </div>
    )
}
export default Home