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

export const SmallChevronUp = ({
  colorName = 'greyscale-dark',
}: SmallChevronUpProps) => {
  const theme = useContext(ThemeContext);
  return (
    <svg width="10px" height="10px" viewBox="0 0 10 10">
      <path
        fill="none"
        fillRule="evenodd"
        stroke={getChevronColor(theme, colorName)}
        strokeLinecap="round"
        strokeWidth="1.5"
        d="M9 7L5 3 1 7"
      />
    </svg>
  );
};

SmallChevronUp.displayName = 'SmallChevronUp';

export { getSmallChevronUpDataUri } from './small-chevron-up.css-rules';
