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

export const Types = {
  DEFAULT: 'default',
  OUTLINED: 'outlined'
}

const PATH_VALUE =
  'M9.23101 1.33147C9.62154 0.940943 10.2547 0.940943 10.6452 1.33147L14.6686 5.35485C15.0591 5.74537 15.0591 6.37854 14.6686 6.76906C14.2781 7.15959 13.6449 7.15959 13.2544 6.76906L13.0004 6.5151C12.5543 6.69974 11.9233 7.05333 11.2541 7.72259C10.2956 8.68104 9.98457 9.56109 9.89004 9.93183C10.3387 11.1372 10.0786 12.5466 9.10964 13.5155L6.50419 10.9101L2.80798 14.6063L1.34326 14.6568L1.39377 13.1921L5.08998 9.49588L2.48463 6.89054C3.45351 5.92166 4.86272 5.66149 6.06808 6.11003C6.43874 6.01555 7.31888 5.70455 8.27745 4.74598C8.94671 4.07672 9.3003 3.44569 9.48493 2.9996L9.23101 2.74568C8.84049 2.35516 8.84049 1.72199 9.23101 1.33147Z'

const CLIP_PATH_ID = 'pinnedIconOutlineClip'

export const PinnedIcon = ({type = Types.DEFAULT, color = IconsGeneralColor}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
    {type === Types.DEFAULT ? (
      <path d={PATH_VALUE} fill={color} />
    ) : (
      <g>
        <defs>
          <clipPath id={CLIP_PATH_ID}>
            <path d={PATH_VALUE} />
          </clipPath>
        </defs>
        <path
          d={PATH_VALUE}
          fill="none"
          stroke={color}
          strokeWidth="3.2"
          strokeLinejoin="round"
          clipPath={`url(#${CLIP_PATH_ID})`}
        />
      </g>
    )}
  </svg>
)

PinnedIcon.category = 'Info'

PinnedIcon.propTypes = {
  type: PropTypes.oneOf(Object.values(Types)),
  color: PropTypes.string
}

PinnedIcon.Types = Types