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

import { ProfileLogo } from 'features/ProfileLogo'

import { PlayButton as PlayButtonBase, Duration } from '../PlayButton'
import { Title } from '../../styled'

export const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`

export const List = styled.ul`
  width: 100%;
`

export const PlayersItem = styled.li`
  width: 100%;
  height: 36px;
  margin-bottom: 12px;
`

export const PlayerAvatar = styled(ProfileLogo)`
  width: 28px;
  height: 34px;
  object-fit: cover;
`

export const Tabs = styled.div`
  margin-top: -10px;
  margin-bottom: 6px;
`

type TabProps = {
  active?: boolean,
}

export const Tab = styled.button<TabProps>`
  position: relative;
  border: none;
  height: 34px;
  padding: 0;
  background-color: transparent;
  font-size: 12px;
  letter-spacing: -0.32px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  text-transform: uppercase;

  ${({ active, theme }) => (
    active
      ? css`
        color: ${theme.colors.white};

        ::after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: '';
          width: 100%;
          height: 2px;
          background-color: #fff;
        }
      `
      : '')}
  :first-child {
    margin-right: 48px;
  }
`

export const PlayerNum = styled.span`
  display: inline-block;
  width: 37px;
  font-size: 14px;
  font-weight: initial;
  color: ${({ theme }) => theme.colors.white};
`

export const PlayButton = styled(PlayButtonBase)`
  justify-content: initial;
  padding-right: 10px;

  ${Duration} {
    margin-left: auto;
  }

  ${Title} {
    max-width: 75%;
  }
`
