import { Card, CardContent } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { CourseData } from "@/helpers/apiSchema/course.schema"
import CustomPDFViewer from "./TryPDF"
import DiscussionSection from "@/components/elements/DiscussionForm"
import QuizGenerator from "./CourseGenerateQuestions"
import EnhancedDiscussionSection from "./CourseDiscussion"
import { useState } from "react"

const CourseMedia : React.FC<{courseData : Record<string,any>}> = ({courseData}) => {

      const [currentPage, setCurrentPage] = useState<number>(0);
      console.log(courseData)
    
  return(
    <div className="container mx-auto py-8">
        <div className="grid md:grid-cols-3 gap-8">
            {/* Main Content */}
            <div className="md:col-span-2 space-y-8">
                <Card>
                    <CardContent className="p-6">
                            <h2 className="text-xl font-semibold mb-4">Course Content</h2>
                            <CustomPDFViewer 
                                pdfPages={courseData?.pages}
                                onChange={setCurrentPage}
                                currentPage={currentPage}
                            />
                    </CardContent>
                </Card>
            </div>


            {/* Sidebar */}
            <div className="space-y-6">
                <Card>
                    <CardContent className="p-6">
                        <h3 className="text-lg font-semibold mb-4">Discussions</h3>
                        {/* <DiscussionSection /> */}
                        <EnhancedDiscussionSection 
                            courseUuid={courseData?.id}
                        />
                    </CardContent>
                </Card>
                
            </div>

        </div>
        <QuizGenerator current_page={currentPage} course_uuid={courseData?.id}/>
  </div>
  )
}

export default CourseMedia