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

const Types = {
  APPROVED: 'approved'
}

const ApproveIconColor = {
  [Types.APPROVED]: FontColorSuccess
}

export const ApproveStatusIcon = ({color = IconsGeneralColor, type}) => {
  // hasOwnProperty explicitly checked here
  // eslint-disable-next-line security/detect-object-injection
  const fill = ApproveIconColor.hasOwnProperty(type) ? ApproveIconColor[type] : color

  return (
    <svg width="13" height="14" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
      <path
        d="M5.47803 0C3.72803 0 1.97803 0.972221 1.97803 3.88889C1.97803 6.5625 3.54492 9 5.47803 9C7.41113 9 8.97803 6.5625 8.97803 3.88889C8.97803 1.21528 7.22803 0 5.47803 0Z"
        fill={fill}
      />
      <path
        d="M5.24026 13.996C3.26107 13.93 1.48992 13.0424 0.257219 11.6633C-0.215999 11.1339 -0.00156516 10.333 0.617163 9.98464C1.12235 9.70019 1.75197 9.81227 2.24383 10.1192C2.93553 10.5508 3.80226 10.8361 4.66992 10.9474C4.28996 11.9637 4.48007 13.1446 5.24026 13.996Z"
        fill={fill}
      />
      <path
        d="M14.7071 10.7071C15.0976 10.3166 15.0976 9.68342 14.7071 9.29289C14.3166 8.90237 13.6834 8.90237 13.2929 9.29289L9.5 13.0858L7.70711 11.2929C7.31658 10.9024 6.68342 10.9024 6.29289 11.2929C5.90237 11.6834 5.90237 12.3166 6.29289 12.7071L8.79289 15.2071C9.18342 15.5976 9.81658 15.5976 10.2071 15.2071L14.7071 10.7071Z"
        fill={fill}
      />
    </svg>
  )
}

ApproveStatusIcon.category = 'Messages'

ApproveStatusIcon.propTypes = {
  color: PropTypes.string,
  type: PropTypes.oneOf(Object.keys(ApproveIconColor))
}

ApproveStatusIcon.Types = Types