// TODO: add number next to it

export default function SubjectSelector (props) {
  const { activeSubjName, searchTerm, data, onSubjSelect } = props

  return (
    <div className='subjectSelector'>
      {data.Subjects.map((subj, i) => {
        if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
          return null
        }

        return (
          <div
            className={activeSubjName === subj.Name
              ? 'subjItem activeSubjItem'
              : 'subjItem'
            }
            key={i}
            onClick={() => onSubjSelect(subj.Name)}
          >
            {subj.Name}
          </div>
        )
      })}
    </div>
  )
}