/*********************************************************************
 * © Copyright IBM Corp. 2024
 *********************************************************************/
import React from 'react'
import PropTypes from 'prop-types'

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

export const AzureDevOpsIcon = ({size = Sizes.DEFAULT}) => {
  const numericSize = size === Sizes.BIG ? 24 : 16
  return (
    <svg
      width={`${numericSize}px`}
      height={`${numericSize}px`}
      viewBox={`0 0 ${numericSize} ${numericSize}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width={`${numericSize}px`} height={`${numericSize}px`} />
      <path
        style={size === Sizes.BIG ? {} : {transform: 'scale(0.725)', transformOrigin: '0 0'}}
        d="M18.1371 5.53701L18.1761 5.56601V18.507L2.43506 16.113L9.03206 24V20.829L18.0661 24L23.9651 18.987V4.46001L18.1371 5.53701Z"
        fill="#0078D4"
      />
      <path
        style={size === Sizes.BIG ? {} : {transform: 'scale(0.725)', transformOrigin: '0 0'}}
        d="M2.433 8.441L18.137 5.537L10.618 0V2.58L2.433 5.824L0 8.995V15.741L2.435 16.113L2.433 16.111V8.441Z"
        fill="#0078D4"
      />
    </svg>
  )
}

AzureDevOpsIcon.category = 'Tool'

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

AzureDevOpsIcon.Sizes = Sizes