// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import { getPaletteColor } from '../../../../mixins/branding';
import type { ThemeProps } from '../../../../types';

const _SortArrowDown = ({ theme }: ThemeProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="8"
    height="6"
    viewBox="0 0 8 6"
  >
    <path
      fill={getPaletteColor('greyscale-black')({ theme })}
      fillRule="evenodd"
      d="M4 6l4-6H0z"
    />
  </svg>
);

export const SortArrowDown: ComponentType<{}> = withTheme(_SortArrowDown);

SortArrowDown.displayName = 'SortArrowDown';
SortArrowDown.propTypes = {};
