// @flow
import styled from 'styled-components'
import theme from '../../../theme'

export const Wrapper = styled.button`
  align-items: center;
  background: ${props => {
    switch (props.backgroundColor) {
      case 'bright-turquoise':
        return theme.gradients['green-2c']
      case 'transparent-green':
        return theme.colors['transparent-dark-blue']
      case 'dodger-blue':
        return theme.gradients['light-blue']
      case 'dodger-blue-font':
        return theme.colors.white
      case 'dark-blue3':
        return theme.colors['dark-blue3']
      default:
        return 'transparent'
    }
  }};
  border: ${props => {
    switch (props.backgroundColor) {
      case 'clear-dark':
        return `1px solid ${theme.colors['dark-blue2']}`
      case 'clear-light':
        return `1px solid ${theme.colors['transparent-white']}`
      case 'transparent-green':
        return `1px solid ${theme.colors['bright-turquoise']}`
      default:
        return 'none'
    }
  }};
  border-radius: 4px;
  box-shadow: ${props => {
    switch (props.backgroundColor) {
      case 'dodger-blue':
        return `0 4px 7px ${theme.shadows['dark-blue']}`
      case 'bright-turquoise':
        return `0 4px 7px ${theme.shadows['dark-blue']}`
      default:
        return 'none'
    }
  }};
  color: ${props => {
    switch (props.backgroundColor) {
      case 'clear-dark':
        return theme.colors['dark-blue2']
      case 'bright-turquoise':
        return theme.colors['dark-blue2']
      case 'transparent-green':
        return theme.colors['bright-turquoise']
      case 'dodger-blue-font':
        return theme.colors['dodger-blue']
      default:
        return theme.colors.white
    }
  }};
  cursor: pointer;
  display: flex;
  font: ${theme.textStyles.clearButton.font}, sans-serif;
  font-size: ${theme.fontSizes.m};
  justify-content: center;
  letter-spacing: 1.5px;
  padding: ${props => (props.size === 'normal' ? '11px 30px' : '11px 50px')};
  position: relative;
  text-decoration: none;
  text-transform: uppercase;

  &&:disabled {
    opacity: 0.5;
  }
`

export default Wrapper
