import type { CSSProperties, HTMLAttributes } from 'react'
import type { IconfontTypes } from './iconfont-types'
import clsx from 'clsx'
import { useMemo } from 'react'
<%_ if (achieve === "mask") { _%>
import './iconfont.css'
<%_ }else{ _%>
import data from './iconfont-data'
<%_ } _%>

interface IconfontProps extends HTMLAttributes<HTMLDivElement> {
  size?: number
  color?: string
  name: IconfontTypes
}

export function Iconfont({
  size,
  color = '#000000',
  name,
  style,
  className,
  ...rest
}: IconfontProps) {
<%_ if (achieve === "bg") { _%>
  const backgroundImage = useMemo(() => {
    const svgData = encodeURIComponent(data[name].replace(/currentColor/g, color))
    return `url("data:image/svg+xml;charset=utf-8,${svgData}")`
  }, [name, color])
<%_ } _%>

  const innerStyle = useMemo(() => {
    const _size = size ? `${size}px` : '1em'
    return {
      ...style,
<%_ if (achieve === "mask") { _%>
      '--icon-size': _size,
      '--icon-color': color,
  <%_ }else{ _%>
      width: _size,
      height: _size,
      display: 'inline-block',
      backgroundRepeat: 'no-repeat',
      backgroundSize: _size,
      backgroundImage,
  <%_ } _%>
    } satisfies CSSProperties
  }, [<%_ if (achieve === "mask") { _%>color, size, style<%_ }else{ _%>backgroundImage, size, style<%_ } _%>])
  return (
    <div
      className={clsx('iconfont', <%_ if (achieve === "mask") { _%> name,<%_ }_%> className)}
      style={innerStyle}
      {...rest}
    >
    </div>
  )
}