import React, { useMemo } from 'react'
import CheckboxList from '../CheckboxList'
import './index.less'

export default function Recommend({
  selected,
  onChange,
  dataSource,
  disabled = false,
}) {
  const top20 = useMemo(() => {
    return dataSource.slice(0, 20)
  }, [dataSource])

  return (
    <div className="assign-user-left-content">
      <div className="assign-user-recommend">
        <CheckboxList
          disabled={disabled}
          dataSource={top20}
          selected={selected}
          onChange={onChange}
        />
      </div>
    </div>
  )
}