import * as React from "react";
import { useGetKey } from "../..";
import { useDebugEvents } from "../../utils";

export interface ClientFormProps
  extends React.ComponentPropsWithoutRef<"form"> {
  "data-id": string;
  "data-label"?: string;
}

export const ClientForm = React.forwardRef(function ClientForm(
  { children, ...rest }: ClientFormProps,
  ref: React.ForwardedRef<HTMLFormElement>,
) {
  const key = useGetKey(rest);
  const { onSubmit, ...props } = useDebugEvents(rest);
  return (
    <form
      ref={ref}
      data-component="ClientForm$Brevity"
      {...props}
      data-id={key}
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        if (onSubmit) {
          onSubmit(e);
        }
      }}
    >
      {children}
    </form>
  );
});