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

export const Sizes = {
  DEFAULT: 'default',
  BIG: 'big'
} as const

const sizeToParams = {
  [Sizes.DEFAULT]: {numericSize: 16},
  [Sizes.BIG]: {numericSize: 48}
}

export const ProjectIcon = ({
  size = Sizes.DEFAULT as typeof Sizes[keyof typeof Sizes],
  color = IconsGeneralColor
}) => {
  const {numericSize} = sizeToParams.hasOwnProperty(size)
    ? // hasOwnProperty explicitly called here
      // eslint-disable-next-line security/detect-object-injection
      sizeToParams[size]
    : sizeToParams[Sizes.DEFAULT]

  return (
    <svg
      width={`${numericSize}px`}
      height={`${numericSize}px`}
      viewBox={`0 0 ${numericSize} ${numericSize}`}
      style={{display: 'block'}}
    >
      <g
        stroke="none"
        strokeWidth="1"
        fill="none"
        fillRule="evenodd"
        style={size === Sizes.BIG ? {transform: 'scale(3)', transformOrigin: '0 0'} : {}}
      >
        <path
          fillRule="evenodd"
          d="M4 4H3C1.89551 4 1 4.89543 1 6V13C1 14.1046 1.89551 15 3 15H13C14.1045 15 15 14.1046 15 13V6C15 4.89543 14.1045 4 13 4H12V3C12 1.89543 11.1045 1 10 1H6C4.89551 1 4 1.89543 4 3V4ZM6 4H10V3H6V4ZM6 11C6 10.4477 6.44775 10 7 10H9C9.55225 10 10 10.4477 10 11C10 11.5523 9.55225 12 9 12H7C6.44775 12 6 11.5523 6 11Z"
          fill={color}
        />
      </g>
    </svg>
  )
}

ProjectIcon.category = 'Entity'

ProjectIcon.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]))
}

ProjectIcon.Sizes = Sizes