// @flow
import React from 'react';
import styled from 'styled-components';

import defaultTheme from '../../../Theme/ApoliticalBrand';
import { assetsBaseUrl } from '../../../Theme/Vars';

type Props = {
  version?: string,
  className?: string,
}

const SiteTitle = styled.a`
  width: ${defaultTheme.remify(30)};
  height: ${defaultTheme.remify(30)};
  display: block;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(${assetsBaseUrl}logos/stamp.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  @media only screen and (min-width: 1000px) {
    width: ${defaultTheme.remify(125)};
    background-size: 97% auto; /* IE11 fix */
    background-image: url(${assetsBaseUrl}logos/apolitical-logo-${({ version }) => version}.svg);
  }
`;

/**
 * The Apolitical logo
 */
const ApoliticalLogo = ({
  version,
  className,
}:Props) => (
  <SiteTitle className={className} version={version} href="/home">
    Apolitical
  </SiteTitle>
);

ApoliticalLogo.defaultProps = {
  version: 'light',
  className: '',
};


export default ApoliticalLogo;