import React from 'react'
import ResponsiveNav from "@/components/Navbar/ResponsiveNav";
import { fetchCourses, fetchSettings } from "@/utils";
import dynamic from 'next/dynamic'
import Course from '@/components/Course/Course';
// const DynamicComponent = dynamic(() => import('@/components/Course/Course'), {
//   ssr: true,
// })
async function getCourses() {
  const courses = await fetchCourses();
  return courses;
}
// async function getCourse(slug: string) {
//   const course = await fetchCourse(slug);
//   return course;
// }

async function getSettings() {
  const settings = await fetchSettings();
  return settings;
}


export default async function Page({ params }: { params: { slug: string } }) {
  const courses = await getCourses();
  const settings = await getSettings();
  //const course = await getCourse(params.slug);
  const course = courses.find(course => course.id === params.slug);
  if (!course) {
    throw new Error(`Course with slug ${params.slug} not found`);
  }
  return (
    <div className='bg-[#F6E8E8]'>
 
      <ResponsiveNav courses={courses} settings={settings} />
      <Course course={course} settings={settings} />
    </div>
  )
}