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 'features/SportIcon'

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

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

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

type Props = {
  tournament: Tournament,
}

export const TournamentInfo = ({ tournament }: Props) => (
  <Wrapper>
    <StyledName nameObj={tournament} />
    <ItemInfo>
      <SportIcon sport={tournament.sport} />
      <Flag src={`https://instatscout.com/images/flags/48/${tournament.country.id}.png`} />
      <TeamOrCountry nameObj={tournament.country} />
    </ItemInfo>
  </Wrapper>
)
