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

export const ChevronDown = ({
  colorName = 'greyscale-dark',
}: ChevronDownProps) => {
  const theme = useContext(ThemeContext);
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="44"
      height="44"
      viewBox="0 0 44 44"
    >
      <path
        fill="none"
        fillRule="evenodd"
        stroke={getChevronColor(theme, colorName)}
        strokeLinecap="round"
        strokeWidth="2"
        d="M28 19l-6 6-6-6"
      />
    </svg>
  );
};

ChevronDown.displayName = 'ChevronDown';
