import React from 'react'
import styled from 'styled-components'

import { colors } from '@auth0/cosmos/tokens'

const StyledIcon = styled.i`
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  svg #shape {
    fill: ${colors.base.grayLightest};
  }
`
const IconGithub = props => {
  return (
    <StyledIcon>
      <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <g id="icon-github" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
          <g id="mark-github" fill="#000000" fillRule="nonzero">
            <path
              d="M10,0 C4.475,0 0,4.475 0,10 C0,14.425 2.8625,18.1625 6.8375,19.4875 C7.3375,19.575 7.525,19.275 7.525,19.0125 C7.525,18.775 7.5125,17.9875 7.5125,17.15 C5,17.6125 4.35,16.5375 4.15,15.975 C4.0375,15.6875 3.55,14.8 3.125,14.5625 C2.775,14.375 2.275,13.9125 3.1125,13.9 C3.9,13.8875 4.4625,14.625 4.65,14.925 C5.55,16.4375 6.9875,16.0125 7.5625,15.75 C7.65,15.1 7.9125,14.6625 8.2,14.4125 C5.975,14.1625 3.65,13.3 3.65,9.475 C3.65,8.3875 4.0375,7.4875 4.675,6.7875 C4.575,6.5375 4.225,5.5125 4.775,4.1375 C4.775,4.1375 5.6125,3.875 7.525,5.1625 C8.325,4.9375 9.175,4.825 10.025,4.825 C10.875,4.825 11.725,4.9375 12.525,5.1625 C14.4375,3.8625 15.275,4.1375 15.275,4.1375 C15.825,5.5125 15.475,6.5375 15.375,6.7875 C16.0125,7.4875 16.4,8.375 16.4,9.475 C16.4,13.3125 14.0625,14.1625 11.8375,14.4125 C12.2,14.725 12.5125,15.325 12.5125,16.2625 C12.5125,17.6 12.5,18.675 12.5,19.0125 C12.5,19.275 12.6875,19.5875 13.1875,19.4875 C17.2580577,18.1133204 19.9989016,14.2962552 20,10 C20,4.475 15.525,2.22044605e-15 10,0 Z"
              id="Shape"
            />
          </g>
        </g>
      </svg>
    </StyledIcon>
  )
}

export default IconGithub
