/**
 * TODO
 * 封装一个好用的 FORM
 */
import { Box } from "@mui/material";
import { forwardRef } from "react";

type FormEvent = React.FormEvent<HTMLFormElement>;

interface FormProps {
  style?: React.CSSProperties;
  className?: string;
  children?: React.ReactElement | React.ReactElement[];
  onSubmit?: (e: FormEvent) => void;
}

export default forwardRef<HTMLFormElement, FormProps>(function Form(
  props: FormProps,
  ref
) {
  const { children, className, style, onSubmit } = props;

  return (
    <Box
      component="form"
      sx={{
        "& .MuiFormControl-root": { mb: 3 },
      }}
      className={className}
      style={style}
      onSubmit={onSubmit}
      ref={ref}
    >
      {children}
    </Box>
  );
});
