import type { FormHTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";
import { resolveGap, type LayoutSpacing } from "./layout-primitives";

export type FormProps = PropsWithChildren<
  FormHTMLAttributes<HTMLFormElement> & {
    gap?: LayoutSpacing;
  }
>;

export function Form({
  children,
  className,
  gap = 16,
  style,
  ...props
}: FormProps) {
  return (
    <form
      className={cn("flex flex-col", className)}
      style={{ gap: resolveGap(gap, 16), ...style }}
      {...props}
    >
      {children}
    </form>
  );
}