import { styled } from 'styleh-components'
import { StyledBaseText } from '@skava/ui/dist/components/atoms/Text'

const StyledText = StyledBaseText.as('span')

const StyledDetails = styled.withComponent(StyledText) `
  text-transform: capitalize;
  color: var(--color-black);
  font-size: 1rem;
  @tablet-or-smaller() {
    font-size: 1rem;
  }
`

const StyledTeamText = styled.withComponent(StyledDetails).attrs({
  'data-qa': 'qa-user-team',
}) ``

const StyledRoleText = styled.withComponent(StyledDetails).attrs({
  'data-qa': 'qa-user-role',
}) ``

const StyledStatus = styled.withComponent(StyledText) `
  text-transform: capitalize;
  color: ${props => props.color};
  font-size: 1rem;
  padding-top: 5px;
  @tablet-or-smaller() {
    font-size: rem(18);
  }
`
const StyledSeparator = styled.span `
  margin: 0 5px;
`
const StyledEmail = styled.withComponent(StyledText) `
  color: var(--color-black);
  font-size: 1rem;
  @tablet-or-smaller() {
    font-size: 1rem;
  }
`
const StyledIdentifier = styled.withComponent(StyledText) `
  &:first-child {
    margin-right: rem(4);
    text-transform: uppercase;
  }
  color: var(--color-black);
  font-size: 1rem;
  @tablet-or-smaller() {
    font-size: 1rem;
  }
`
const StyledName = styled.withComponent(StyledText).attrs({
  'data-qa': 'qa-user-name',
}) `
  font-weight: 700;
  color: var(--color-black);
  font-size: 1rem;
  text-transform: capitalize;
`

export {
  StyledDetails,
  StyledStatus,
  StyledSeparator,
  StyledEmail,
  StyledTeamText,
  StyledRoleText,
  StyledIdentifier,
  StyledName,
}