// @flow
import React, { useContext, type StatelessFunctionalComponent } from 'react';
import { ThemeContext } from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import type { FilterIconProps } from './filter-icon.proptypes';

export const FilterIcon: StatelessFunctionalComponent<FilterIconProps> = ({
  colorName = 'greyscale-black',
}: FilterIconProps) => {
  const theme = useContext(ThemeContext);
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="44"
      height="44"
      viewBox="0 0 44 44"
    >
      <g
        fill={getPaletteColor('background')({ theme })}
        fillRule="evenodd"
        stroke={getPaletteColor(colorName)({ theme })}
        strokeLinecap="round"
        strokeWidth="2"
      >
        <path d="M12 16.5h20M12 27.5h20" />
        <circle cx="18.5" cy="16.5" r="2.5" />
        <circle cx="25.5" cy="27.5" r="2.5" />
      </g>
    </svg>
  );
};
