function Icon({ name, style, className = "" }) {
  return <span className={`mi material-symbols-rounded ${className}`} style={style}>{name}</span>;
}

function Button({ children, variant = "secondary", size, icon, iconRight, href, onClick }) {
  const cls = [
    "btn",
    variant === "primary" ? "btn-primary" : "",
    variant === "ghost" ? "btn-ghost" : "",
    size === "lg" ? "btn-lg" : "",
  ].filter(Boolean).join(" ");
  const content = (
    <>
      {icon && <Icon name={icon}/>}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight}/>}
    </>
  );
  if (href) return <a className={cls} href={href} onClick={onClick}>{content}</a>;
  return <button className={cls} onClick={onClick}>{content}</button>;
}

function useReveal(deps = []) {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.show)");
    if (!("IntersectionObserver" in window)) {
      els.forEach(el => el.classList.add("show"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("show");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.18, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, deps);
}

window.Icon = Icon;
window.Button = Button;
window.useReveal = useReveal;