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

import { isMobileDevice } from 'config/userAgent'

import { ProfileLink } from 'features/ProfileLink'

export const Wrapper = styled.div`
  ${isMobileDevice ? css`
    width: 100%;
    display: flex;
    justify-content: space-between;
  ` : ''}
`

export const SubtitleMain = styled.div`
  display: flex;
  align-items: center;
`

export const Tooltip = styled.div`
  position: absolute;
  top: 110%;
  left: 15px;
  padding: 0 6px;
  line-height: 14px;
  background-color: #fff;
  border-radius: 6px;
  color: #000;
  font-weight: 400;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  z-index: 3;
  display: none;
`

export const SportWrapper = styled.div`
  display: flex;
  align-items: center;
  height: 0.75rem;
  z-index: 3;
  position: relative;

  &:hover {
    ${Tooltip} {
      ${!isMobileDevice ? css`display: block;` : ''}
    }
  }
`

export const CountryWrapper = styled(SportWrapper)`
  z-index: 2;
  margin-left: 0.567rem;

  ${isMobileDevice
    ? css`margin-left: 3.5px;`
    : ''}
`

export const CountryFlag = styled.img`
  width: 0.71rem;
  height: 0.75rem;
  object-fit: contain;
  object-position: bottom;

  ${isMobileDevice
    ? css`
      width: 12px;
      height: 8px;
    `
    : ''}
`

type StyledLinkProps = {
  isLeftSide?: boolean,
  isMatchPage?: boolean,
}

export const StyledLink = styled(ProfileLink)<StyledLinkProps>`
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.567rem;
  margin-left: ${({ isLeftSide }) => (isLeftSide ? '0px' : '0.567rem')};

  &:hover {
    text-decoration: underline;
    color: rgba(255, 255, 255, 1);
  }

  ${({ isMatchPage }) => (isMatchPage
    ? css`
      font-size: 14px;

      ${isMobileDevice
      ? css`
          font-size: 10px;
        `
      : ''};
    ` : '')}
`

type FavoriteSignProps = {
  marginLeft?: number,
}

export const FavoriteSign = styled.span<FavoriteSignProps>`
  display: inline-block;
  width: 0.472rem;
  height: 0.472rem;
  margin-left: ${({ marginLeft = 9 }) => marginLeft}px;
  background: url('/images/sportFavStar.png') no-repeat center / 100% 100%;
  ${isMobileDevice
    ? css`
      width: 10px;
      height: 10px;
    `
    : ''};
`