import React from 'react'
import ResponsiveNav from "@/components/Navbar/ResponsiveNav";
import { fetchCourses, fetchCourse, fetchSettings } from "@/utils";
import { CoursesProps } from "@/types";
import Course from '@/components/Course/Course';
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() => import('@/components/Course/Course'), {
  ssr: false,
})
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 const metadata = {
  title: "All In One",
  description: "**",
}

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} />
      <DynamicComponent course={course} settings={settings} />
    </div>
  )
}