import { forwardRef, type SVGAttributes } from "react"

export type SvgUseBaseIcon =
  | "brand-twitter"
  | "brand-linkedin"
  | "brand-facebook"
  | "brand-telegram"
  | "close-outline"
  | "check-outline"
  | "chevron-right-outline"
  | "chevron-left-outline"
  | "chevron-down-outline"
  | "chevron-up-outline"
  | "arrow-drop-down-rounded"
  | "arrow-drop-up-rounded"
  | "square-rounded"
  | "check-circle-outline"
  | "home-solid"
  | "eyes-off-outline"
  | "light-event-list-outline"
  | "add-circle-outline"
  | "sort-vertical-outline"
  | "arrow-upward"
  | "arrow-downward"
  | "dots-vertical"
  | "reload"
  // In case you want to pass icon id dynamic
  | (string & {})

export interface SvgUseProps<T extends SvgUseBaseIcon>
  extends Omit<SVGAttributes<SVGElement>, "icon"> {
  icon: T
  path?: string
}

export const SvgUse = forwardRef<SVGSVGElement, SvgUseProps<SvgUseBaseIcon>>(
  ({ icon, className, path, ...rest }, ref) => {
    const ariaLabel = rest["aria-label"] ?? "Present Icon"
    const baseAssetPath = `${path ?? "/svg/public.svg"}#${icon}`

    return (
      <svg ref={ref} role="img" className={className} {...rest} aria-label={ariaLabel}>
        <use href={baseAssetPath} />
      </svg>
    )
  },
)

SvgUse.displayName = "SvgUse"