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

export const _ArrowForward = (props: {|
  ...ThemeProps,
  ...ArrowForwardProps,
|}) => (
  <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1">
    <g
      stroke="none"
      strokeWidth="1"
      fill="none"
      fillRule="evenodd"
      strokeLinecap="round"
    >
      <g
        transform="translate(-29.000000, -13.000000)"
        stroke={getStrokeColor(props)}
      >
        <g transform="translate(16.000000, 0.000000)">
          <g transform="translate(22.000000, 22.000000) scale(-1, 1) translate(-22.000000, -22.000000) translate(14.000000, 14.000000)">
            <path
              d="M0,8 L16,8"
              id="Path-24"
              strokeWidth="1.5"
              transform="translate(8.000000, 8.000000) rotate(-180.000000) translate(-8.000000, -8.000000) "
            />
            <polyline
              strokeWidth="1.5"
              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 ArrowForward = withTheme(_ArrowForward);
ArrowForward.displayName = 'ArrowForward';
