import { prefersReducedMotion } from "../shared/media.js";

export function initPrimaryButtonShine() {
  const els = document.querySelectorAll(".btn--primary, .fab--primary");
  if (!els.length || prefersReducedMotion()) return;

  function setPos(el, clientX, clientY) {
    const r = el.getBoundingClientRect();
    if (r.width <= 0 || r.height <= 0) return;
    const x = ((clientX - r.left) / r.width) * 100;
    const y = ((clientY - r.top) / r.height) * 100;
    el.style.setProperty("--btn-shine-x", `${x}%`);
    el.style.setProperty("--btn-shine-y", `${y}%`);
  }

  els.forEach((el) => {
    el.addEventListener(
      "pointermove",
      (e) => {
        setPos(el, e.clientX, e.clientY);
      },
      { passive: true },
    );
    el.addEventListener(
      "pointerleave",
      () => {
        el.style.removeProperty("--btn-shine-x");
        el.style.removeProperty("--btn-shine-y");
      },
      { passive: true },
    );
  });
}