import React, { useState } from 'react'; import { Head, Link } from '@inertiajs/react'; import { ChevronLeft, ChevronRight, CheckCircle, FileText, Download, Maximize2 } from 'lucide-react'; import CourseLayout from '@/Layouts/CourseLayout'; import { Button } from '@/Components/ui/button'; import { Separator } from '@/Components/ui/separator'; import { Badge } from '@/Components/ui/badge'; // Interfaces (Should ideally be shared/exported) interface Lesson { id: string; title: string; slug: string; type: 'video' | 'text' | 'quiz' | 'pdf'; content?: string; video_url?: string; content_pdf?: string; // URL to PDF is_completed: boolean; duration_seconds: number; next_lesson_slug?: string; prev_lesson_slug?: string; attachments?: Array<{ id: string, name: string, url: string, size: string }>; } interface PageProps { course: any; modules: any[]; lesson: Lesson; } export default function Learn({ course, modules, lesson }: PageProps) { const [isCompleted, setIsCompleted] = useState(lesson.is_completed); const handleComplete = () => { // Optimistic UI update setIsCompleted(true); // In real app: router.post(route('lessons.complete', lesson.id)) }; return ( {/* Header Content */}

{lesson.type} • {Math.ceil(lesson.duration_seconds / 60)} min read

{lesson.title}

{/* Main Content Render */}

{lesson.type === 'video' && lesson.video_url && (