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

const Types = {
  ON: 'on',
  OFF: 'off'
} as const

const LiveChatIconColor = {
  [Types.ON]: FontColorSuccess,
  [Types.OFF]: FontColorError
}

export const LiveChatIcon = ({
  color = IconsGeneralColor,
  type
}: {
  color?: string
  type: typeof Types[keyof typeof Types]
}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
    <path
      d="M6 1C3.23853 1 1 3.23858 1 6C1 7.78892 1.93945 9.35841 3.35205 10.242L7.83301 13.3233C9.18945 14.2561 10 14.1972 10 12.5509V11C12.7615 11 15 8.76142 15 6C15 3.23858 12.7615 1 10 1H6Z"
      // hasOwnProperty explicitly checked here
      // eslint-disable-next-line security/detect-object-injection
      fill={LiveChatIconColor.hasOwnProperty(type) ? LiveChatIconColor[type] : color}
    />
  </svg>
)

LiveChatIcon.category = 'Info'

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

LiveChatIcon.Types = Types