import React from 'react'

import { ProfileTypes, SportTypes } from 'config'
import { getProfileFallbackLogo, getProfileLogo } from 'helpers'

import { Image } from 'features/Common'

type ProfileImageProps = {
  alt?: string,
  className?: string,
  id: number,
  lazy?: boolean,
  profileType: ProfileTypes,
  size?: number,
  sportType: SportTypes,
  title?: string,
}

export const ProfileLogo = ({
  alt,
  className,
  id,
  lazy = false,
  profileType,
  size,
  sportType,
  title,
}: ProfileImageProps) => {
  const src = getProfileLogo({
    id,
    profileType,
    size,
    sportType,
  })
  const fallbackSrc = getProfileFallbackLogo({
    profileType,
    sportType,
  })

  return (
    <Image
      alt={alt}
      src={lazy ? '' : src}
      data-src={lazy ? src : ''}
      fallbackSrc={fallbackSrc}
      className={className}
      title={title}
    />
  )
}