import React, { useEffect, useRef, useState } from "react";

/**
 * Bounded inline box for the connected pill row, shared by both tiers.
 *
 * The pill keeps its segments on one row. The wrapper contributes no minimum
 * width of its own (see `.b3-wvs-pill-scroller` in index.css), so table cells,
 * flex archive cards and builder columns can shrink below the row instead of
 * widening the page. When the row then no longer fits, and only then, the
 * wrapper becomes a horizontal scroll box with a small gutter for focus and
 * selection rings. Rows that fit keep painting shadows without any clip.
 */
const PillScroller: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const scrollerRef = useRef<HTMLDivElement | null>(null);
  const [overflowing, setOverflowing] = useState(false);

  useEffect(() => {
    const scroller = scrollerRef.current;
    if (!scroller || typeof ResizeObserver === "undefined") return;

    const measure = () =>
      setOverflowing(scroller.scrollWidth - scroller.clientWidth > 1);
    const observer = new ResizeObserver(measure);
    observer.observe(scroller);
    if (scroller.firstElementChild) {
      observer.observe(scroller.firstElementChild);
    }
    measure();

    return () => observer.disconnect();
  }, []);

  return (
    <div
      ref={scrollerRef}
      className="b3-wvs-pill-scroller"
      data-b3-wvs-overflowing={overflowing ? "true" : undefined}
    >
      {children}
    </div>
  );
};

export default PillScroller;