Orbit

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type OrbitProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** One node per item, placed evenly on the ring. */
  items: React.ReactNode[];
  /** Ring radius in px. */
  radius?: number;
  /** Seconds for one full turn. */
  duration?: number;
  /** Content in the centre. */
  children?: React.ReactNode;
};

/**
 * Items on a ring. The gap between neighbour centres is the chord 2r × sin(180deg / n), and the
 * item size is capped at 80 percent of it so neighbours never touch. The ring turns slowly,
 * items counter-rotate to stay upright, and it stops under reduced motion and off screen.
 */
export function Orbit({ items, radius = 72, duration = 40, className, children, ...props }: OrbitProps) {
  const ringRef = React.useRef<HTMLDivElement>(null);
  const n = items.length;
  const chord = 2 * radius * Math.sin(Math.PI / n);
  const itemSize = Math.min(Math.floor(chord * 0.8), 40);
  const box = radius * 2 + itemSize;

  React.useEffect(() => {
    const ring = ringRef.current;
    if (!ring || typeof ring.animate !== "function") return;
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const spin = ring.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
      duration: duration * 1000,
      iterations: Infinity,
    });
    const keep = Array.from(ring.children).map((child) =>
      child.animate([{ rotate: "0deg" }, { rotate: "-360deg" }], { duration: duration * 1000, iterations: Infinity }),
    );
    const all = [spin, ...keep];
    let visible = true;
    const sync = () => {
      for (const a of all) {
        if (visible && !media.matches) a.play();
        else a.pause();
      }
    };
    const io = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
      sync();
    });
    io.observe(ring);
    media.addEventListener("change", sync);
    sync();
    return () => {
      io.disconnect();
      media.removeEventListener("change", sync);
      for (const a of all) a.cancel();
    };
  }, [duration, n]);

  return (
    <div
      className={cn("relative grid shrink-0 place-items-center", className)}
      style={{ width: box, height: box }}
      {...props}
    >
      <div
        aria-hidden="true"
        className="absolute rounded-full border border-dashed"
        style={{ width: radius * 2, height: radius * 2 }}
      />
      <div ref={ringRef} className="absolute inset-0">
        {items.map((item, i) => (
          <div
            key={i}
            style={
              {
                "--i": i,
                "--n": n,
                "--r": `${radius}px`,
                "--a": "calc(-90deg + var(--i) * 360deg / var(--n))",
                width: itemSize,
                height: itemSize,
              } as React.CSSProperties
            }
            className="absolute top-1/2 left-1/2 grid translate-x-[calc(-50%+cos(var(--a))*var(--r))] translate-y-[calc(-50%+sin(var(--a))*var(--r))] place-items-center rounded-full border bg-background text-foreground"
          >
            {item}
          </div>
        ))}
      </div>
      <div className="relative">{children}</div>
    </div>
  );
}