import type { IconProps } from './icon'
import iconMap from './map'

export type Props = IconProps

const Icon = ({
    type,
    size = 24,
    color,
    theme,
    iconSet
}: Props) => {
    const icons = {
        ...iconMap,
        ...(iconSet || {})
    }

    const svg = icons[type as keyof typeof iconMap]

    if (!svg) {
        // eslint-disable-next-line no-console
        console.error('Cannot find icon type:', type)
    }

    const icon = svg
        ?.replace('width="24"', `width=${size}`)
        ?.replace('height="24"', color || theme
            ? `height=${size} color=${color || `var(--w-color-${theme})`}`
            : `height=${size}`)

    return <span dangerouslySetInnerHTML={{ __html: icon }} />
}

export default Icon