import React from 'react';
import styled from 'react-emotion';
import Icon from './Icon';
import { buttons, shadows } from './styles';

const StyledAuthenticationPage = styled.section`
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 100vh;
`

const PageLogoIcon = styled(Icon)`
  color: #c4c6d2;
  margin-top: -300px;
`

const LoginButton = styled.button`
  ${buttons.button};
  ${shadows.dropDeep};
  ${buttons.default};
  ${buttons.gray};

  padding: 0 12px;
  margin-top: -40px;
  display: flex;
  align-items: center;
  position: relative;
`

const AuthenticationPage = ({
  onLogin,
  loginDisabled,
  loginErrorMessage,
  renderButtonContent,
  renderPageContent,
}) => {
  return (
    <StyledAuthenticationPage>
      <PageLogoIcon size="300px" type="netlify-cms"/>
      {loginErrorMessage ? <p>{loginErrorMessage}</p> : null}
      {!renderPageContent ? null : renderPageContent()}
      {!renderButtonContent ? null :
        <LoginButton disabled={loginDisabled} onClick={onLogin}>
          {renderButtonContent()}
        </LoginButton>
      }
    </StyledAuthenticationPage>
  );
};

export default AuthenticationPage;