import styled from 'styled-components/macro'

import { ProfileTypes } from 'config'

export const Wrapper = styled.div`
  display: flex;
  margin-left: 70px;
  margin-bottom: 50px;
`

export const Name = styled.h1`
  margin-bottom: 10px;
  line-height: 40px;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: #fff;
`

export const Logo = styled.img<{ profileType: number }>`
  width: 88px;
  height: 88px;
  margin-right: 15px;
  border-radius: ${({ profileType }) => (
    profileType === ProfileTypes.PLAYERS ? '50%' : '0'
  )};
`

export const Details = styled.div``

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

export const AddToFavButton = styled.button`
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  background:
    linear-gradient(
      180deg, rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 0.01%,
      rgba(0, 0, 0, 0.1) 99.99%
    ),
    #0033CC;
  box-shadow: 0px 1px 0px rgba(0, 4, 41, 0.3);
  border-style: none;
  outline: none;
  cursor: pointer;

  svg {
    margin-right: 10px;
    width: 18px;
    height: 18px;
  }
`

export const InFavorites = styled(AddToFavButton)`
  color: #EACB6F;
  border: 1px solid currentColor;
  background-color: transparent;
`

export const InfoItems = styled.div`
  margin-left: 20px;
`

export const InfoItem = styled.div`
  line-height: 18px;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
`