import React from 'react'
import { cn } from '@/utils/cn'

import { icons } from './icon-mapping'

export interface LocalIconProps extends React.HTMLAttributes<HTMLSpanElement> {
  name: string
  size?: number | string
}

/**
 * 本地图标组件，使用 mask 方案实现颜色控制
 */
export function LocalIcon({
  name,
  size = 16,
  className,
  ...props
}: LocalIconProps) {
  const svgContent = icons[`../../icons/${name}.svg`]

  if (!svgContent) {
    console.warn(`Icon ${name} not found in src/icons/`)
    return null
  }

  const sizeStyle = typeof size === 'number' ? `${size}px` : size

  // 将 SVG 原生内容转换为 data URI（通过 encodeURIComponent）
  // 这样无论是在 SDK 独立开发中还是主站引入，都不会有路径找不到的跨域/路由问题
  const maskUrl = `url("data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}")`

  return (
    <span
      className={cn('inline-block shrink-0', className)}
      style={{
        width: sizeStyle,
        height: sizeStyle,
        mask: `${maskUrl} no-repeat center`,
        maskSize: 'contain',
        WebkitMask: `${maskUrl} no-repeat center`,
        WebkitMaskSize: 'contain',
        backgroundColor: 'currentColor',
      }}
      {...props}
    />
  )
}
