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

export const Sizes = {
  DEFAULT: 'default',
  SMALL: 'small'
} as const

export const PlusIcon = ({
  size = Sizes.DEFAULT as typeof Sizes[keyof typeof Sizes],
  color = IconsGeneralColor
}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
    {size === Sizes.DEFAULT && (
      <path
        d="M8 2C7.44775 2 7 2.44772 7 3V7H3C2.44775 7 2 7.44772 2 8C2 8.55228 2.44775 9 3 9H7V13C7 13.5523 7.44775 14 8 14C8.55225 14 9 13.5523 9 13V9H13C13.5522 9 14 8.55228 14 8C14 7.44772 13.5522 7 13 7H9V3C9 2.44772 8.55225 2 8 2Z"
        fill={color}
      />
    )}
    {size === Sizes.SMALL && (
      <path
        fillRule="evenodd"
        d="M9 4C9 3.44775 8.55225 3 8 3C7.44775 3 7 3.44775 7 4V7H4C3.44775 7 3 7.44775 3 8C3 8.55225 3.44775 9 4 9H7V12C7 12.5522 7.44775 13 8 13C8.55225 13 9 12.5522 9 12V9H12C12.5522 9 13 8.55225 13 8C13 7.44775 12.5522 7 12 7H9V4Z"
        fill={color}
      />
    )}
  </svg>
)

PlusIcon.category = 'Common Actions'

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

PlusIcon.Sizes = Sizes