// components/ui/form.tsx
"use client";

import { createContext, useContext, forwardRef } from "react";

interface FormContextType {
  isLoading?: boolean;
}

const FormContext = createContext<FormContextType>({});

export const useForm = () => useContext(FormContext);

export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
  isLoading?: boolean;
  onSubmit: (e: React.FormEvent) => void;
}

const Form = forwardRef<HTMLFormElement, FormProps>(
  ({ children, isLoading, onSubmit, ...props }, ref) => {
    const handleSubmit = (e: React.FormEvent) => {
      e.preventDefault();
      if (!isLoading) {
        onSubmit(e);
      }
    };

    return (
      <FormContext.Provider value={{ isLoading }}>
        <form ref={ref} onSubmit={handleSubmit} {...props}>
          {children}
        </form>
      </FormContext.Provider>
    );
  }
);

Form.displayName = "Form";

export interface FormFieldProps {
  children: React.ReactNode;
  error?: string;
}

const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
  ({ children, error }, ref) => {
    return (
      <div ref={ref} className="mb-4">
        {children}
        {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
      </div>
    );
  }
);

FormField.displayName = "FormField";

export { Form, FormField };