// @flow
import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import { getChevronColor } from '../css-rules';
import type { SmallChevronRightProps } from './small-chevron-right.proptypes';

export const SmallChevronRight = ({
  colorName = 'greyscale-dark',
}: SmallChevronRightProps) => {
  const theme = useContext(ThemeContext);
  return (
    <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>
  );
};

SmallChevronRight.displayName = 'SmallChevronRight';

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