import { styled } from 'styleh-components'
import { Heading } from 'atoms/Text/Heading'
import { PrimaryButton } from 'presets/Buttons'

const StyledButton = styled.withComponent(PrimaryButton).attrs({
  'data-qa': props => props.isDisabled ? 'qa-send-invite-disabled' : 'qa-send-invite',
})`
  background: #1b75bc;
  width: rem(268);
  @tablet-or-smaller(){
    width: rem(212);
  }
  @phone-or-smaller(){
    width: 100%;
  }

  ${props => props.isDisabled && styled.css`
    opacity: 0.5;
    pointer-events: none;
  `}
`

const StyledHeading = styled.withComponent(Heading)`
  margin-top: 0;
  text-transform: capitalize;
  color: #2C2C2C;
  @phone-or-smaller(){
    margin-bottom: 0;
  }
`
export { StyledButton, StyledHeading }