import { styled } from 'styleh-components'
import { Heading } from '@skava/ui/dist/components/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: var(--color-blue);
  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: var(--color-black);
  @phone-or-smaller() {
    margin-bottom: 0;
  }
`
export { StyledButton, StyledHeading }