import styled from 'styled-components/macro'

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

type IconProps = {
  src: string,
}

const Icon = styled.span<IconProps>`
  display: inline-block;
  height: 10px;
  min-width: 10px;

  background-image: url(/images/${({ src }) => `${src}-icon`}.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
`

type Props = {
  sport: SportTypes,
}

export const SportIcon = ({ sport }: Props) => (
  <Icon src={getSportLexic(sport)} />
)