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

/**
 * The buttons that end a form, kept in view.
 *
 * A long form (an order, a vehicle) used to end where its last field ended, so saving meant scrolling to the bottom and, after a
 * validation error, back up to find it. This floats at the foot of the window until the form's own end is reached, then rests there.
 */
export function FormActions({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <div
      className={cn(
        "sticky bottom-4 z-10 mt-8 flex flex-wrap justify-end gap-3 rounded-xl border bg-surface/95 p-3 shadow-[0_8px_24px_-12px_rgba(27,18,85,0.25)] backdrop-blur",
        className,
      )}
    >
      {children}
    </div>
  );
}