veza/apps/web/src/components/education/course-learning-view/CourseLearningViewPlayer.tsx

/**
 * CourseLearningView — player stage (video / quiz / article).
 */
import { Button } from '@/components/ui/button';
import { PlayCircle, HelpCircle } from 'lucide-react';

interface Lesson {
  id: string;
  title: string;
  duration: string;
  type: 'video' | 'article' | 'quiz';
  content?: string;
  quizId?: string;
}

interface CourseLearningViewPlayerProps {
  lesson: Lesson | null;
  onStartQuiz: (quizId: string) => void;
}

export function CourseLearningViewPlayer({
  lesson,
  onStartQuiz,
}: CourseLearningViewPlayerProps) {
  if (!lesson) {
    return (
      <div className="bg-black aspect-video w-full flex items-center justify-center">
        <p className="text-kodo-content-dim">Select a lesson</p>
      </div>
    );
  }

  if (lesson.type === 'video') {
    return (
      <div className="bg-black aspect-video w-full flex items-center justify-center relative">
        <div className="text-center">
          <PlayCircle className="w-16 h-16 text-white opacity-50 mx-auto mb-4" />
          <p className="text-kodo-content-dim">Video Player Placeholder</p>
          <p className="text-xs text-kodo-content-dim mt-2">{lesson.title}</p>
        </div>
      </div>
    );
  }

  if (lesson.type === 'quiz') {
    return (
      <div className="bg-black aspect-video w-full flex items-center justify-center relative">
        <div className="text-center">
          <HelpCircle className="w-16 h-16 text-kodo-gold mx-auto mb-4" />
          <h3 className="text-white text-xl font-bold mb-4">Quiz: {lesson.title}</h3>
          <Button
            variant="primary"
            onClick={() => lesson.quizId && onStartQuiz(lesson.quizId)}
          >
            Start Quiz
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="p-8 max-w-2xl mx-auto text-left w-full h-full overflow-y-auto bg-kodo-graphite">
      <h2 className="text-2xl font-bold text-white mb-4">{lesson.title}</h2>
      <p className="text-kodo-text-main leading-relaxed">
        {lesson.content ??
          'This is a text-based lesson. Content would be rendered here in Markdown.'}
      </p>
    </div>
  );
}