"use client";

import { useState, useEffect, lazy, Suspense } from "react";
const Hero1 = lazy(() => import('../Hero1'));
import Hero2 from '../Hero2'
import CoursesSilder from "../CoursesSilder";
import ContactForm from '../ContactForm'
import Loading from '../Loading'
import Footer from '../Footer'
import { CoursesProps, SettingsProps } from "@/types";
import Whatsapp from "../Whatsapp";
const Home = ({ courses, settings }: { courses: CoursesProps[], settings: SettingsProps }) => {
  const [loading, setLoading] = useState(true);
  // const [courses, setCourses] = useState<CoursesProps[]>([]);

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

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

  console.log(courses);
  return (
    <div className='bg-[#F2D5D5]'>
      {loading ? (
        <div className="flex justify-center items-center h-screen">
          <Suspense fallback={<div>Loading...</div>}>
            <Loading />
          </Suspense>
        </div>
      ) : (
        <div>
          <Hero1 />
          <Hero2 settings={settings} />
          <Suspense fallback={<div>Loading...</div>}>
            <CoursesSilder courses={courses} />
          </Suspense>
          <ContactForm startLoading={startLoading} stopLoading={stopLoading} />
          <Whatsapp settings={settings} />
          <Footer settings={settings} />
        </div>
      )}
    </div>
  )
}
export default Home