'use client';
import React from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import CourseDetailHeroSection from './CourseDetailHeroSection';
import CourseDetailStats from './CourseDetailStats';
import CourseMedia from './CourseMedia';
import CourseProgress from './CourseProgress';
import TryPDF  from './TryPDF';

const CourseIndividualContentWrapper : React.FC = () => {
    // Dummy course data
    const courseData = {
        title: "Advanced JavaScript Programming",
        instructor: {
            name: "Dr. Sarah Johnson",
            title: "Senior Software Engineer",
            avatar: "https://placehold.co/600x400"
        },
        description: "Master modern JavaScript concepts including ES6+, async programming, and advanced frameworks. This comprehensive course covers everything from basic concepts to advanced topics in JavaScript development.",
        category: "Programming",
        duration: "12 weeks",
        enrolledStudents: 1234,
        rating: 4.8,
        totalReviews: 456,
        completionRate: 85,
        lastUpdated: "2024-01-10",
        chapters: [
            { title: "Introduction to ES6+", duration: "2.5 hours", isCompleted: true },
            { title: "Async Programming", duration: "3 hours", isCompleted: true },
            { title: "Advanced DOM Manipulation", duration: "2 hours", isCompleted: false },
            { title: "Modern Frameworks Overview", duration: "4 hours", isCompleted: false }
        ],
        requirements: [
            "Basic understanding of JavaScript",
            "Familiarity with web development concepts",
            "Node.js installed on your computer"
        ]
    };

    return (
        <div className="min-h-screen bg-gray-50">
            {/* Hero Section */}
            <CourseDetailHeroSection courseData={courseData}/>

            {/* Course Stats */}
            <CourseDetailStats courseData={courseData}/>

            <CourseProgress courseData={courseData}/>

            {/* Course Content */}
            <CourseMedia courseData={courseData}/>
            
        </div>
    );
};

export default CourseIndividualContentWrapper;