"use client"
import React, { useEffect, useState, Suspense } from 'react'
import Banner from './Banner'
import LongDesc from './LongDesc'
import CourseImagesSilder from './CourseImagesSilder'
import Accordion from './Accordion'
import { CoursesProps, SettingsProps } from '@/types'
import Footer from '../Footer'
import Loading from '../Loading'

const Course = ({ course, settings }: { course: 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, 300)); // 0.5 second delay
      setLoading(false);
    }; loadCourses();
  }, []);



  return (
    <div className='bg-[#F6E8E8]'>
      {loading ? (
        <div className="flex justify-center items-center h-screen">
          <Suspense fallback={<div>Loading...</div>}>
            <Loading />
          </Suspense>
        </div>
      ) : (
        <div>
          <Banner courseData={course} />
          <LongDesc courseData={course} />
          <CourseImagesSilder courseData={course} />
          <Accordion courseData={course} />
          <Footer settings={settings} />
        </div>
      )}
    </div>
  )
}

export default Course