import React, { FC } from 'react';
import { IKnowledge } from '../../types';
import classnames from 'classnames';

interface IProps {
  knowledgeList: IKnowledge[]; // 接受已经格式化过的知识点数组
  currentKnowledge: IKnowledge;
  onSelectCurrentKnowledge: (knowledge: IKnowledge) => void;
}

const Sidebar: FC<IProps> = ({ knowledgeList = [], currentKnowledge, onSelectCurrentKnowledge }) => {
  return (
    <div className="sidebar">
      <p className="title">相关概念:</p>
      <ul className="list">
        {knowledgeList.map((knowledge) => (
          <li
            className={classnames('item', {
              active: currentKnowledge.id === knowledge.id,
            })}
            key={knowledge.id}
            onClick={() => onSelectCurrentKnowledge(knowledge)}
          >
            {knowledge.topic}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Sidebar;
