import { UserFavorite } from 'requests'

import { Name, useName } from 'features/Name'

import { URL_AWS } from 'config'

import {
  TooltipBlockWrapper,
  TooltipBlockItem,
  TooltipBlockItemThin,
  Flag,
} from './styled'

type TooltipBlockProps = {
  favorite: UserFavorite,
  topPosition: number,
}

export const TooltipBlock = ({
  favorite: {
    info,
  },
  topPosition,
}: TooltipBlockProps) => {
  const playerFirstName = useName(info, 'firstname_')
  const playerLastName = useName(info, 'lastname_')
  return (
    <TooltipBlockWrapper top={topPosition}>
      <TooltipBlockItem>
        {playerFirstName && playerLastName && `${playerFirstName} ${playerLastName}`}
      </TooltipBlockItem>
      <TooltipBlockItem>
        <Name nameObj={info} />
      </TooltipBlockItem>
      <TooltipBlockItemThin>
        {info?.team && <Name nameObj={info.team} />}{' '}
        {info?.country && <Flag src={`${URL_AWS}/media/flags/${info.country.id}.png`} />}
      </TooltipBlockItemThin>
    </TooltipBlockWrapper>
  )
}
