"use client"; import { BookOpen, ChevronLeft, ChevronRight, Clock, type LucideIcon, Play, } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface LessonNav { previous?: { title: string; number: number; href?: string; }; next?: { title: string; number: number; href?: string; }; } interface Education12Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; courseTitle?: string; lessonNumber?: number; lessonTitle?: string; description?: string; duration?: string; instructor?: string; thumbnailUrl?: string; navigation?: LessonNav; labels?: { lesson?: string; instructor?: string; }; buttons?: { label: string; href?: string; variant?: "default" | "outline" | "secondary" | "ghost" | "link"; icon?: LucideIcon; }[]; displayPosition?: "left" | "right"; className?: string; } export const education12Demo: Education12Props = { badge: { label: "Module 3", variant: "outline" }, courseTitle: "Data Structures & Algorithms", lessonNumber: 12, lessonTitle: "Understanding Binary Search Trees", description: "Learn how binary search trees work, their properties, and common operations like insertion, deletion, and traversal. We'll implement a BST from scratch and analyze its time complexity. This lesson is part of the Data Structures & Algorithms course.", duration: "24 min", instructor: "Dr. Sarah Chen", thumbnailUrl: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=675&fit=crop", navigation: { previous: { title: "Tree Traversal Methods", number: 11, href: "https://beste.co", }, next: { title: "AVL Trees & Balancing", number: 13, href: "https://beste.co", }, }, labels: { lesson: "Lesson", instructor: "Instructor", }, buttons: [ { label: "Watch Lesson", href: "https://beste.co", icon: Play }, { label: "Mark as Complete", href: "https://beste.co", variant: "outline" }, ], displayPosition: "left", }; export function Education12({ badge, courseTitle, lessonNumber, lessonTitle, description, duration, instructor, thumbnailUrl, navigation, labels = {}, buttons = [], displayPosition = "left", className, }: Education12Props) { const { lesson: lessonLabel, instructor: instructorLabel } = labels; const videoSection = (

{thumbnailUrl && ( {lessonTitle

)} {/* Play button overlay */}

{/* Duration badge */} {duration && (

{duration}

)}

{/* Lesson navigation */} {navigation && lessonLabel && (

{navigation.previous ? ( ) : (

)} {navigation.next ? ( ) : (

)}

); const detailsSection = (

{badge && ( {badge.label} )} {courseTitle && (

{courseTitle}

)} {lessonTitle && (

{lessonNumber && lessonLabel && ( {lessonLabel} {lessonNumber}:{" "} )} {lessonTitle}

)} {description && (

{description}

)} {instructor && instructorLabel && (

{instructorLabel}

{instructor}

)} {buttons.length > 0 && (

{buttons.map((button, i) => { const Icon = button.icon; return ( ); })}

)}

); return (

{videoSection} {detailsSection}

); }