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

export const SearchIcon: StatelessFunctionalComponent<SearchIconProps> = ({
  colorName = 'greyscale-black',
  disabled = false,
}: SearchIconProps) => {
  const theme = useContext(ThemeContext);
  const computedColorName = disabled ? 'greyscale-medium' : colorName;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="44"
      height="44"
      viewBox="0 0 44 44"
    >
      <g
        fill="none"
        fillRule="evenodd"
        stroke={getPaletteColor(computedColorName)({ theme })}
      >
        <circle cx="21" cy="21" r="6" strokeWidth="2" />
        <path strokeLinecap="round" strokeWidth="2.5" d="M26 26l4 4" />
      </g>
    </svg>
  );
};

SearchIcon.displayName = 'SearchIcon';
