import * as React from "react";
import { useRouterState } from "@tanstack/react-router";

import { cn } from "../lib/utils";
import { CardStack } from "./card-stack";

/**
 * A floating action bar that pins itself to the bottom of the nearest
 * positioned ancestor (usually a scroll container with `position: relative`).
 *
 * Rendered as a `CardStack` so it picks up the card visual — wrap action
 * buttons as children; they'll be right-aligned inside the card.
 *
 * To pin to the bottom even when content is short, the parent should be a
 * flex column filling the scroll container (so `mt-auto` pushes the actions
 * down). `sticky bottom-4` also keeps it visible while scrolling long content.
 *
 * Hidden while the router is navigating/loading so the actions don't flash
 * on top of a loading state.
 */
function FloatActions({ className, children }: { className?: string; children: React.ReactNode }) {
  const isLoading = useRouterState({ select: (s) => s.isLoading });

  if (isLoading) {
    return null;
  }

  return (
    <CardStack className={cn("sticky shadow-lg bottom-4 left-0 right-0 mt-auto w-full", className)}>
      <div className="flex items-center justify-end gap-3 px-4 py-3">{children}</div>
    </CardStack>
  );
}

export { FloatActions };