"use client";

import type { ReactNode } from "react";
import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Form } from "@/components/ui/form";
import { cn } from "@/lib/utils";

type AdminFormProps<TFieldValues extends FieldValues> = {
  form: UseFormReturn<TFieldValues>;
  onSubmit: SubmitHandler<TFieldValues>;
  children: ReactNode;
  submitLabel: string;
  submittingLabel?: string;
  className?: string;
};

export default function AdminForm<TFieldValues extends FieldValues>({
  form,
  onSubmit,
  children,
  submitLabel,
  submittingLabel = "Saving…",
  className,
}: AdminFormProps<TFieldValues>) {
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-5", className)} noValidate>
        {children}
        <Button type="submit" disabled={form.formState.isSubmitting}>
          {form.formState.isSubmitting ? submittingLabel : submitLabel}
        </Button>
      </form>
    </Form>
  );
}