import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

import type { Tournament } from 'requests/getSportTournaments'

import {
  ItemInfo,
  Name,
  Flag,
  TeamOrCountry,
} from 'features/ItemsList/styled'
import { SportIcon } from 'components/SportIcon/SportIcon'

const Wrapper = styled.div`
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
`

const StyledName = styled(Name)`
  font-size: 14px;

 ${isMobileDevice
    ? css`
     @media (max-width: 650px){
      font-size: 10px;
     }

     @media (orientation: landscape){
      font-size: 12px;
     }
   `
    : ''}
`

type Props = {
  isIcon?: boolean,
  prefix?: string,
  tournament: Tournament,
}

export const TournamentInfo = ({
  isIcon,
  prefix,
  tournament,
}: Props) => (
  <Wrapper>
    <StyledName nameObj={tournament} className='title' prefix={prefix} />
    <ItemInfo>
      {isIcon && <SportIcon size={isMobileDevice ? 10 : '0.65rem'} sport={tournament.sport} />}
      <Flag src={`https://cf-aws.insports.tv/media/flags/${tournament.country.id}.png`} />
      <TeamOrCountry nameObj={tournament.country} />
    </ItemInfo>
  </Wrapper>
)