import React, {ReactElement} from 'react'
import useClassNames from '../../shared/useClassNames'
import './index.less'

interface IconProps {
  name: string
  className?: string
  style?: any
  onClick?(event: React.MouseEvent<SVGSVGElement, MouseEvent>): void
}
const Icon = (props: IconProps): ReactElement => {
  const {name, className, ...otherProps} = props
  const newClassName = useClassNames('icon', 'iconfont', {}, [className])
  return (
    <svg
      aria-hidden="true"
      className={newClassName}
      onClick={e => props?.onClick?.(e)!}
      {...otherProps}>
      <use xlinkHref={`#icon-${name}`} />
    </svg>
  )
}

export default Icon