import React from 'react'

let faLoaded = null
/** True when a Font Awesome stylesheet is on the page (the admin enqueues assets/vendor/fontawesome). */
export function isFontAwesomeLoaded() {
  if (faLoaded !== null) return faLoaded
  if (typeof document === 'undefined') return false
  const found = Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).some((el) => /font-?awesome|fontawesome|\/fa-?(all|solid)/i.test(el.getAttribute('href') || el.id || ''))
  // Cache only a positive answer: the stylesheet can be added after the first render.
  if (found) faLoaded = true
  return found
}

/** Font Awesome icon (`fa` = "fa-envelope" or "fas fa-envelope") with a lucide fallback when FA is not loaded. */
export default function FaIcon({ fa, fallback: Fallback, className = '', style, size = 16 }) {
  if (isFontAwesomeLoaded()) {
    const cls = /^(fas|far|fab|fa-solid|fa-regular|fa-brands)\b/.test(fa) ? fa : `fas ${fa}`
    return <i className={`${cls} ${className}`} style={{ fontSize: size, width: size * 1.25, textAlign: 'center', ...style }} aria-hidden="true" />
  }
  return Fallback ? <Fallback className={className} style={{ width: size, height: size, ...style }} aria-hidden="true" /> : null
}