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

import { isMobileDevice } from 'config/userAgent'

import { ProfileLink } from 'features/ProfileLink'

export const Wrapper = styled.div`
  display: flex;
`

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

  ${isMobileDevice
    ? css`
      width: 12px;
      height: 8px;
      margin-left: 3.5px;
    `
    : ''};
`

export const NameSignWrapper = styled.div`
  display: flex;
  max-width: 90%;
  align-items: center;
`

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;
      `
      : ''};
    ` : null)}  
`

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;
    `
    : ''};
`