/* global React */
// Primitives.jsx — shared building blocks for the Mi Refugio UI kit

const { useRef, useEffect, useState } = React;

// --- Icon: imperatively mounts a Lucide icon so it survives React re-renders ---
function Icon({ name, size = 22, stroke = 1.75, color = 'currentColor', style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    const host = ref.current;
    if (!host || !window.lucide) return;
    host.innerHTML = '';
    const el = document.createElement('i');
    el.setAttribute('data-lucide', name);
    host.appendChild(el);
    window.lucide.createIcons({
      nodes: [el],
      attrs: { width: size, height: size, 'stroke-width': stroke, color },
    });
  }, [name, size, stroke, color]);
  return <span ref={ref} className="ic" style={{ display: 'inline-flex', ...style }} aria-hidden="true" />;
}

function WhatsAppIcon({ size = 20 }) {
  return (
    <span className="mr-whatsapp-ic" style={{ width: size, height: size }} aria-hidden="true">
      <img src="assets/icons/whatsapp.svg" alt="" />
    </span>
  );
}

// --- Button ---
function Button({ variant = 'primary', children, icon, iconRight, onClick, style = {}, type = 'button' }) {
  return (
    <button type={type} className={`mr-btn mr-btn--${variant}`} onClick={onClick} style={style}>
      {icon === 'whatsapp' ? <WhatsAppIcon size={20} /> : icon && <Icon name={icon} size={18} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} size={18} />}
    </button>
  );
}

// --- Eyebrow / kicker ---
function Eyebrow({ children, color }) {
  return <div className="mr-eyebrow" style={color ? { color } : undefined}>{children}</div>;
}

// --- Pill ---
function Pill({ tone = 'sand', children }) {
  return <span className={`mr-pill mr-pill--${tone}`}>{children}</span>;
}

// --- Photo placeholder: warm, labeled, never a real image ---
function Placeholder({ label, icon = 'image', ratio = '4 / 3', round = 'lg', style = {} }) {
  return (
    <div
      className="mr-ph"
      style={{ aspectRatio: ratio, borderRadius: `var(--radius-${round})`, ...style }}
    >
      <div className="mr-ph__inner">
        <Icon name={icon} size={26} />
        <span>{label}</span>
      </div>
    </div>
  );
}

// --- Section wrapper with consistent rhythm ---
function Section({ id, bg = 'cream', narrow = false, children, style = {} }) {
  return (
    <section id={id} className={`mr-section mr-section--${bg}`} style={style}>
      <div className={`mr-container${narrow ? ' mr-container--narrow' : ''}`}>{children}</div>
    </section>
  );
}

Object.assign(window, { Icon, WhatsAppIcon, Button, Eyebrow, Pill, Placeholder, Section });