import { styled } from 'styleh-components'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { Heading } from 'atoms/Text'

const StyledText = styled(Heading).attrs({
  'data-qa': 'qa-text',
})`
  display: flex;
  margin: 0;
  justify-content: center;
  align-items: center;
  padding: 0 rem(8);
`
const StyledIcon = styled(MaterialIcon).attrs({
  'data-qa': 'qa-icon',
})`
  ${(props: { order: string }) =>
    props.order &&
    styled.css`
      order: ${props.order};
    `};
`

const Wrapper = styled.div`
  display: flex;
  justify-content: flex-start;
`

export { Wrapper, StyledIcon, StyledText }