/**
 * @fileoverview @alias GreyButton
 */
import React from 'react'
import { isString } from 'exotic'
import { styled } from 'view-container'
import Button from './BlueButton'

const GreyButtonAdapter = props => (
  <Button {...props} className={'button grey-button ' + props.className} />
)

const GreyButton = styled.withComponent(GreyButtonAdapter) `
  @font(13, regular);
  font-weight: 900;
  background-color: $colors-lightgrey;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  align-self: flex-end;

  ${props =>
    (props.isDisabled || props.state === 'disabled') &&
    styled.css `
      opacity: 0.5;
      background-color: $colors-primary-darkgreen;
    `}

  /* when the button has a link inside of it... */
  a {
    color: $colors-main-background;
  }
`

export { GreyButton }
export default GreyButton