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

const _SmallChevronDown = ({
  colorName = 'greyscale-dark',
  className = '',
  theme,
}: BrandProps & ThemeProps & { className?: string }) => (
  <svg className={className} width="10" height="10" viewBox="0 0 10 10">
    <path
      fill="none"
      fillRule="evenodd"
      stroke={getChevronColor(theme, colorName)}
      strokeLinecap="round"
      strokeWidth="1.5"
      d="M9 3L5 7 1 3"
    />
  </svg>
);

export const SmallChevronDown: ComponentType<BrandProps> = withTheme(
  _SmallChevronDown,
);

SmallChevronDown.displayName = 'SmallChevronDown';
SmallChevronDown.propTypes = {
  ...brandPropTypes,
};

export { getSmallChevronDownDataUri } from './chevron-down.css-rules';
