// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../../types';
import { getChevronColor } from '../css-rules';
import type { BrandProps } from '../../../../mixins/branding';

const _SmallChevronRight = ({
  colorName = 'greyscale-dark',
  theme,
}: BrandProps & ThemeProps) => (
  <svg
    width="10px"
    height="10px"
    viewBox="0 0 10 10"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill="none"
      fillRule="evenodd"
      stroke={getChevronColor(theme, colorName)}
      strokeLinecap="round"
      strokeWidth="1.5"
      d="M3 9l4-4-4-4"
    />
  </svg>
);

export const SmallChevronRight: ComponentType<{}> = withTheme(
  _SmallChevronRight,
);

SmallChevronRight.displayName = 'SmallChevronRight';

export { getSmallChevronRightDataUri } from './chevron-right.css-rules';
