// @todo eh
import React from 'react'
import { isString } from 'exotic'
import { styled } from 'uxui-modules/view-container'
import Button from '../BaseButtonAtom'

const StyledBlueButton = styled.withComponent(Button) `
  padding: $spacing;
  text-align: center;
  border-radius: $border-radius;
  font-weight: 900;
  margin: 0;
  cursor: pointer;
  background-color: $colors-secondary;
  color: $colors-white;

  ${props =>
    props.center &&
    styled.css `
      align-items: center;
      justify-content: center;
    `}

  ${props =>
    props.isLowpriority &&
    styled.css `
      background-color: $colors-gray;
    `}

  ${props =>
    (props.isDisabled || props.state === 'disabled') &&
    styled.css `
      background-color: $colors-gray;
      color: $colors-white;
      pointer-events: none;
      cursor: not-allowed;
    `}
`

class BlueButton extends React.PureComponent {
  static defaultProps = {
    defaultClassName: 'button blue-button blue',
  }
  render() {
    return <StyledBlueButton {...this.props} />
  }
}

export { BlueButton }
export default BlueButton