// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import { getStrokeColor } from './arrow-back.css-rules';
import type { ThemeProps } from '../../../types';
import type { ArrowBackProps } from './arrow-back.proptypes';
import { arrowBackPropTypes } from './arrow-back.proptypes';

const _ArrowBack = (props: ThemeProps & ArrowBackProps) => (
  <svg width="19px" height="19px" viewBox="0 0 19 17" version="1.1">
    <g
      stroke="none"
      strokeWidth="1"
      fill="none"
      fillRule="evenodd"
      strokeLinecap="round"
    >
      <g
        transform="translate(-35.000000, -503.000000)"
        stroke={getStrokeColor(props)}
      >
        <g transform="translate(23.000000, 490.000000)">
          <g transform="translate(14.000000, 14.000000)">
            <path
              d="M0,8 L16,8"
              strokeWidth="2"
              transform="translate(8.000000, 8.000000) rotate(-180.000000) translate(-8.000000, -8.000000) "
            />
            <polyline
              strokeWidth="2"
              transform="translate(4.000000, 8.000000) rotate(-180.000000) translate(-4.000000, -8.000000) "
              points="0 0 8 8 1.77635684e-15 16"
            />
          </g>
        </g>
      </g>
    </g>
  </svg>
);

export const ArrowBack: ComponentType<ArrowBackProps> = withTheme(_ArrowBack);
ArrowBack.displayName = 'ArrowBack';
ArrowBack.propTypes = arrowBackPropTypes;
