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

export const Types = {
  DEFAULT: 'default',
  OUTLINE: 'outline',
  COMPACT: 'compact'
}

export const CommentIcon = ({color = IconsGeneralColor, type = Types.DEFAULT}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
    {type === Types.DEFAULT && (
      <path
        fillRule="evenodd"
        d="M2.3938 1H13.5994C14.3696 1 15 1.67499 15 2.5V11.5C15 12.325 14.3696 13 13.5994 13H7.5C7.02148 13 6.78467 13.2289 6.42432 13.5773C6.10205 13.8889 5.68091 14.2962 4.89917 14.7206C4.677 14.8412 4.42676 14.6312 4.45044 14.3795C4.55713 13.2471 3.86084 13 3 13H2.69995C1.76123 13 1 12.2389 1 11.3V2.5C1 1.67499 1.62329 1 2.3938 1ZM4 5C4 4.44772 4.44775 4 5 4H11C11.5522 4 12 4.44772 12 5C12 5.55228 11.5522 6 11 6H5C4.44775 6 4 5.55228 4 5ZM5 8C4.44775 8 4 8.44772 4 9C4 9.55228 4.44775 10 5 10H9C9.55225 10 10 9.55228 10 9C10 8.44772 9.55225 8 9 8H5Z"
        fill={color}
      />
    )}
    {type === Types.OUTLINE && (
      <path
        fillRule="evenodd"
        d="M3.7 11C3.3134 11 3 10.6866 3 10.3V3.7C3 3.3134 3.3134 3 3.7 3H12.3C12.6866 3 13 3.3134 13 3.7V10.3C13 10.6866 12.6866 11 12.3 11H3.7ZM13.5994 1H2.3938C1.62329 1 1 1.67499 1 2.5V11.3C1 12.2389 1.76123 13 2.69995 13H3C3.86084 13 4.55713 13.2471 4.45044 14.3795C4.42676 14.6312 4.677 14.8412 4.89917 14.7206C5.68091 14.2962 6.10205 13.8889 6.42432 13.5773C6.78467 13.2289 7.02148 13 7.5 13H13.5994C14.3696 13 15 12.325 15 11.5V2.5C15 1.67499 14.3696 1 13.5994 1Z"
        fill={color}
      />
    )}
    {type === Types.COMPACT && (
      <path
        fillRule="evenodd"
        d="M4.3938 4H11.5994C12.3696 4 13 4.67499 13 5.5V10.5C13 11.325 12.3696 12 11.5994 12H9.5C9.02148 12 8.78467 12.2289 8.42432 12.5773C8.10205 12.8889 7.68091 13.2962 6.89917 13.7206C6.677 13.8412 6.42676 13.6312 6.45044 13.3795C6.55713 12.2471 5.86084 12 5 12H4.69995C3.76123 12 3 11.2389 3 10.3V5.5C3 4.67499 3.62329 4 4.3938 4Z"
        fill={color}
      />
    )}
  </svg>
)

CommentIcon.category = 'Entity'

CommentIcon.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
}

CommentIcon.Types = Types