"use client";

import type { ReactNode } from "react";
import { cn } from "../lib/utils";

// THE SOCIAL ROW'S LAST RESORT: a box that scrolls the row sideways when it
// still cannot fit (a header that has already made room). The row's END is in
// view first, with no script and no change to the DOM or tab order: the box is
// `direction: rtl`, whose first scroll position is its right edge, and the row
// inside it is `ltr` and `w-max` (as wide as its links, so it overflows to the
// left, where an rtl box can scroll). No scrollbar is drawn; touch, a
// trackpad, shift + wheel and the keyboard still scroll it. When the row fits,
// nothing about it changes.
//
// The one piece of script: a link that takes focus is scrolled into view
// (`nearest`, inside the 4 px `scroll-padding`, so its ring shows). Chromium
// does not bring a partly hidden link into view on focus inside an rtl box.
//
// `tabIndex={-1}`: Firefox makes a scroll container that overflows a tab stop
// of its own, with no name. The links inside are the stops, and focus scrolls
// them into view, so the box itself is taken out of the order.
//
// Put the row's own 4 px inline padding on the row (SocialLinks' className,
// `px-1`) — the padding must be inside the scrolled content to be reachable —
// and this box cancels it with `-mx-1`, so the key after the box (the header's
// theme control) still meets the last link.
export function SocialScroll({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <div
      data-social-scroll=""
      tabIndex={-1}
      className={cn(
        "min-w-0 overflow-x-auto [direction:rtl] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden scroll-px-1 -mx-1 -my-1 py-1",
        className,
      )}
      onFocus={(event) => {
        const target = event.target as HTMLElement;
        if (target !== event.currentTarget) {
          target.scrollIntoView({ block: "nearest", inline: "nearest" });
        }
      }}
    >
      {children}
    </div>
  );
}