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

export const SmallChevronLeft = ({
  colorName = 'greyscale-dark',
}: SmallChevronLeftProps) => {
  const theme = useContext(ThemeContext);
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="10"
      height="10"
      viewBox="0 0 10 10"
    >
      <path
        fill="none"
        fillRule="evenodd"
        stroke={getChevronColor(theme, colorName)}
        strokeLinecap="round"
        strokeWidth="1.5"
        d="M7 9L3 5l4-4"
      />
    </svg>
  );
};

SmallChevronLeft.displayName = 'SmallChevronLeft';

export { getSmallChevronLeftDataUri } from './small-chevron-left.css-rules';
