import _isEmpty from 'lodash/isEmpty'
import _map from 'lodash/map'
import React from 'react'

export const Influancers = (props: IInfluancersProps) => {
  const {
    data,
    classNamePrefix,
    headerNode = (
      <>
        TOP
        <span>&nbsp;INFLUANCERS</span>
      </>
    ),
  } = props
  return (
    <div className={`${classNamePrefix}_influencers_container`}>
      {!_isEmpty(data) && (
        <div className={`${classNamePrefix}_influencers_header`}>{headerNode}</div>
      )}
      <div className={`${classNamePrefix}_influencers`}>
        {_map(data, (influencer, index) => (
          <div key={influencer.prereg_id} className={`${classNamePrefix}_influencer`}>
            <span className={`${classNamePrefix}_influencer_index`}>{index + 1}</span>
            <span className={`${classNamePrefix}_influencer_title`}>INFLUENCER</span>
            <span className={`${classNamePrefix}_influencer_name`}>
              {influencer.name}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}