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

const _ChevronUp = ({
  colorName = 'greyscale-darker',
  theme,
}: BrandProps & ThemeProps) => (
  <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 25l-6-6-6 6"
    />
  </svg>
);

export const ChevronUp: ComponentType<{}> = withTheme(_ChevronUp);

ChevronUp.displayName = 'ChevronUp';
ChevronUp.propTypes = { ...brandPropTypes };

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