import clsx from "clsx";
import { useRef } from "react";
import { NavLink } from "react-router-dom";

function BottomNavItem({ to, end, label, children }) {
  const iconRef = useRef(null);

  const triggerSqueak = () => {
    const el = iconRef.current;
    if (!el) return;
    el.classList.remove("animate-tap-squeak");
    // Force reflow so the animation restarts even on rapid taps.
    void el.offsetWidth;
    el.classList.add("animate-tap-squeak");
  };

  return (
    <NavLink
      to={to}
      end={end}
      aria-label={label}
      onClick={triggerSqueak}
      className={({ isActive }) =>
        clsx(
          "relative flex-1 inline-flex flex-col items-center justify-center gap-1 h-full transition-colors duration-fast",
          isActive ? "text-accent" : "text-fg-tertiary hover:text-fg-secondary"
        )
      }
    >
      <span ref={iconRef} className="inline-flex will-change-transform">
        {children}
      </span>
      <span className="text-[10px] font-mono tracking-[0.04em] uppercase">{label}</span>
    </NavLink>
  );
}

window.BottomNavItem = BottomNavItem;