import React from "react";
import Tooltip from "@/components/Tooltip";
import { Button } from "@/components/ui/button";
import _variants from "@/components/ui/button/_variants";
import {
  FormBuilderBaseElement,
  FormBuilderButtonElement,
} from "@/types/app-component-formbuilder";
import { UseFormReturn } from "react-hook-form";

export default function ButtonElement({
  form,
  element,
}: {
  form: UseFormReturn<any>;
  element: FormBuilderBaseElement & FormBuilderButtonElement<typeof _variants>;
}) {
  const { disabled, label, onClick, type, tooltip } = element;

  return (
    <Tooltip content={tooltip}>
      <Button
        {...element}
        onClick={
          type !== "submit"
            ? onClick
            : () => {
                form.handleSubmit(() => {})();
              }
        }
        disabled={
          type === "submit" ? !form.formState.isValid || disabled : disabled
        }
      >
        {label}
      </Button>
    </Tooltip>
  );
}