import { styled } from 'styleh-components'
import { Button, ButtonLabel, ButtonIcon } from 'atoms/Button'
import { StyledFormWrapper } from '../styled'

const StyledButton = styled.withComponent(Button)`
  padding: 0;
  background: transparent;
  border: none;

  ${ButtonIcon} {
    display: flex;
    margin: 0;
    svg {
      width: rem(24);
      height: rem(24);
      fill: var(--color-blue);
      overflow: visible;
    }
  }
  ${ButtonLabel} {
    text-transform: capitalize;
    font-size: 16px;
    color: var(--color-blue);
    @tablet-or-larger() {
      display: none;
    }
  }
`

const AddUserForm = styled.withComponent(StyledFormWrapper).attrs({
  'data-qa': 'qa-add-user-container',
})`
  ${StyledButton} {
    ${props =>
      props.isDisabled &&
      styled.css`
        opacity: 0.5;
        pointer-events: none;
      `}
  }
  @tablet-or-smaller() {
    margin-bottom: rem(16);
  }
`

export { StyledButton, AddUserForm }