// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { NextIconProps } from './next-icon.proptypes';
import { getFillColor, getSize, getStrokeColor } from './next-icon.css-rules';
import type { ThemeProps } from '../../../types';

const _NextIcon = ({
  theme,
  disabled,
  size = 'lg',
}: ThemeProps & NextIconProps) => (
  <svg
    width={getSize({ size })}
    height={getSize({ size })}
    viewBox="0 0 48 48"
    version="1.1"
  >
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g
        transform="translate(-6.000000, -6.000000)"
        fill={getFillColor({ theme, disabled })}
      >
        <circle cx="30" cy="30" r="24" />
        <g
          transform="translate(20.000000, 20.000000)"
          stroke={getStrokeColor({ theme })}
          strokeLinecap="round"
          strokeWidth="4"
        >
          <polyline
            transform="translate(15.000000, 10.000000) scale(-1, 1) rotate(-180.000000) translate(-15.000000, -10.000000)"
            points="10 0 20 10 10 20"
          />
          <path
            d="M0,10 L20,10"
            transform="translate(10.000000, 10.000000) rotate(-180.000000) translate(-10.000000, -10.000000)"
          />
        </g>
      </g>
    </g>
  </svg>
);

export const NextIcon: ComponentType<NextIconProps> = withTheme(_NextIcon);

NextIcon.displayName = 'NextIcon';
