import { ProfileTypes, PROFILE_NAMES } from 'config'

import {
  ScWrapper,
  ScLogo,
  ScName,
} from './styled'

type ItemInfoType = {
  active?: boolean,
  id: number,
  name: string,
  onClick: (val: any) => void,
  type: ProfileTypes,
}

export const ItemInfo = ({
  active,
  id,
  name,
  onClick,
  type,
}: ItemInfoType) => (
  <ScWrapper onClick={onClick}>
    <ScLogo src={`https://instatscout.com/images/${PROFILE_NAMES[type]}/180/${id}.png`} />
    <ScName active={active}>{name}</ScName>
  </ScWrapper>
)
