import { createElement, type ReactNode, type SVGProps } from "react"
import { icons, type IconName, type IconNode } from "@pathmx/core/icons"
import { cn } from "./utils.ts"

export type IconProps = Omit<SVGProps<SVGSVGElement>, "children" | "name"> &
  Readonly<{
    name: IconName
    size?: number | string
  }>

function renderNode(
  [element, attributes, children]: IconNode,
  key: number,
): ReactNode {
  return createElement(
    element,
    { ...attributes, key },
    children?.map(renderNode),
  )
}

/** Shared decorative React renderer for the PathMX icon catalog. */
export function Icon({
  name,
  size = 24,
  className,
  "aria-hidden": ariaHidden = true,
  focusable = "false",
  ...props
}: IconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={cn("lucide", `lucide-${name}`, className)}
      aria-hidden={ariaHidden}
      focusable={focusable}
      {...props}
    >
      {icons[name].map(renderNode)}
    </svg>
  )
}