/*********************************************************************
 * © Copyright IBM Corp. 2024
 *********************************************************************/
import React from 'react'
import PropTypes from 'prop-types'
import {IconsGeneralColor} from '@targetprocess/css-variables'

export const Types = {
  DEFAULT: 'default',
  ACTIVE: 'active'
} as const

export const MenuSearchIcon = ({
  color = IconsGeneralColor,
  type = Types.DEFAULT as typeof Types[keyof typeof Types]
}) => (
  <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" style={{display: 'block'}}>
    {type === Types.DEFAULT && (
      <path
        fillRule="evenodd"
        d="M3 8.5C3 5.46243 5.46243 3 8.5 3C11.5376 3 14 5.46243 14 8.5C14 11.5376 11.5376 14 8.5 14C5.46243 14 3 11.5376 3 8.5ZM8.5 1C4.35786 1 1 4.35786 1 8.5C1 12.6421 4.35786 16 8.5 16C9.9527 16 11.3089 15.587 12.4577 14.872L16.2911 18.7072C16.6815 19.0979 17.3147 19.098 17.7053 18.7076C18.0959 18.3172 18.0961 17.684 17.7056 17.2934L14.0063 13.5922C15.2437 12.2548 16 10.4657 16 8.5C16 4.35786 12.6421 1 8.5 1Z"
        fill={color}
      />
    )}
    {type === Types.ACTIVE && (
      <path
        fillRule="evenodd"
        d="M8.5 1C4.35786 1 1 4.35786 1 8.5C1 12.6421 4.35786 16 8.5 16C9.9527 16 11.3089 15.587 12.4577 14.872L16.2911 18.7072C16.6815 19.0979 17.3147 19.098 17.7053 18.7076C18.0959 18.3172 18.0961 17.684 17.7056 17.2934L14.0063 13.5922C15.2437 12.2548 16 10.4657 16 8.5C16 4.35786 12.6421 1 8.5 1Z"
        fill={color}
      />
    )}
  </svg>
)

MenuSearchIcon.category = 'Menu'

MenuSearchIcon.propTypes = {
  // Object.keys used here
  // eslint-disable-next-line security/detect-object-injection
  type: PropTypes.oneOf(Object.keys(Types).map(key => Types[key])),
  color: PropTypes.string
}

MenuSearchIcon.Types = Types