import React from 'react';

interface EducationPanelProps {
  lessons: Array<{ id: string; title: string; completed: boolean }>;
  onLessonSelect: (id: string) => void;
}

export const EducationPanel: React.FC<EducationPanelProps> = ({ lessons, onLessonSelect }) => {
  return (
    <div className="education-panel">
      <h2>Education</h2>
      <ul>
        {lessons.map((lesson) => (
          <li key={lesson.id} onClick={() => onLessonSelect(lesson.id)} className={lesson.completed ? 'completed' : ''}>
            <span>{lesson.title}</span>
            {lesson.completed && <span className="check">✔</span>}
          </li>
        ))}
      </ul>
    </div>
  );
};