import styled from 'styled-components/macro'

import { SportTypes } from 'config'
import { getSportLexic } from 'helpers'

import { Icon } from 'features/Icon'

const IconWrap = styled.div`
  color: white;
`

type Props = {
  fill?: string,
  size?: number | string,
  sport: SportTypes,
}

const sportIcons = {
  basketball: {
    color: '#f1903b',
    icon: 'Basketball',
  },
  boxing: {
    color: '#ffffff',
    icon: 'Boxing',
  },
  football: {
    color: '#5CDD86',
    icon: 'Football',
  },
  handball: {
    color: '#F6BE4F',
    icon: 'Handball',
  },
  hockey: {
    color: '#5eb2ff',
    icon: 'Hockey',
  },
  streetball: {
    color: '#f1903b',
    icon: 'Streetball',
  },
  volleyball: {
    color: '#2D8B8A',
    icon: 'Volleyball',
  },
}

export const SportIcon = ({
  fill,
  size,
  sport,
}: Props) => {
  const sportType = getSportLexic(sport)
  const IconSport = sportIcons[sportType]?.icon

  return (
    <IconWrap>
      {IconSport && (
        <Icon
          refIcon={IconSport}
          color={fill || sportIcons[sportType]?.color}
          size={size}
          styles={{
            alignItems: 'center',
            display: 'flex',
            // height: '100%', // пока не удалять
            justifyContent: 'center',
          }}
        />
      )}
    </IconWrap>
  )
}
