// @flow
import React from 'react';

import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

type Props = {
  className?: string,
}

const { color } = ApoliticalBrand;

const FacebookIcon = ({ className }: Props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="11" height="23" viewBox="0 0 11 23" className={className}>
    <desc>Facebook Icon</desc>
    <g fill="none" fillRule="evenodd">
      <g fill={`${color.slate}`}>
        <g>
          <g>
            <g>
              <path d="M7.315 23H2.437V11.499H0V7.536h2.437v-2.38C2.437 1.923 3.813 0 7.723 0h3.255v3.964H8.944c-1.523 0-1.623.554-1.623 1.588l-.007 1.984H11l-.431 3.963H7.314V23z" transform="translate(-154 -790) translate(0 120) translate(135 657) translate(19 13)" />
            </g>
          </g>
        </g>
      </g>
    </g>
  </svg>
);

FacebookIcon.defaultProps = {
  className: '',
};

export default FacebookIcon;