import React    from "react"
import { pure } from "recompose"
import styled   from "styled-components";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const NavigationButtonWrapper = styled.div`
  width: 50%;
`;

const NavigationButtonWrapperRight = styled.div`
  width: 50%;
  text-align: right;
`;

const NavigationButton = styled.span`
  color: ${props => props.aboveImage ? "#fff" : "#888"};
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 2px;
  text-shadow: ${props => props.aboveImage ? "1px 1px 5px rgba(0,0,0,0.5)" : "none"};

  :hover {
    color: #000;
    background-color: #f5f5f5;
    text-shadow: none;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  }
`;

const NavButton = ({ keyName, buttonRight, icon, text, onClick, aboveImage }) => {
  const button = buttonRight ? 
    <NavigationButtonWrapperRight>
      <NavigationButton
        key = { keyName }
        onClick = { onClick }
        aboveImage = { aboveImage }>
        <FontAwesomeIcon icon={ icon } />
        { " " + text }
      </NavigationButton>
    </NavigationButtonWrapperRight>
    : 
    <NavigationButtonWrapper>
      <NavigationButton
        key = { keyName }
        onClick = { onClick }
        aboveImage = { aboveImage }>
        <FontAwesomeIcon icon={ icon } />
        { " " + text }
      </NavigationButton>
    </NavigationButtonWrapper>;

  return(button);
}

module.exports = pure(NavButton)

@@ -471,27 +471,22 @@
  2px;%0A  
-text-shadow
+filter
 : $%7Bprop
@@ -510,24 +510,36 @@
 mage ? %22
+drop-shadow(
 1px 1px 
 5px rgba
@@ -530,17 +530,17 @@
 1px 1px 
-5
+1
 px rgba(
@@ -549,16 +549,17 @@
 0,0,0.5)
+)
 %22 : %22non

add shadow for NavButtonWhite again