oms-website-nextjs/components/ContactForm.tsx

"use client";

import React, { useActionState, useEffect, useRef } from "react";
import { useFormStatus } from "react-dom";
import { submitContactForm, ContactFormState } from "@/actions/contact";
import Button from "@/components/ui/Button"; // Use your existing Button component

// Submit button component with pending state
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <Button type="submit" variant="primary" size="lg" disabled={pending}>
      {pending ? "Sending..." : "Send Message"}
    </Button>
  );
}

// The main contact form component
export default function ContactForm() {
  const initialState: ContactFormState = {
    message: null,
    errors: {},
    success: false,
  };
  const [state, dispatch] = useActionState(submitContactForm, initialState);
  const formRef = useRef<HTMLFormElement>(null); // Ref to reset the form

  // Reset form on successful submission
  useEffect(() => {
    if (state.success) {
      formRef.current?.reset();
    }
  }, [state.success]);

  return (
    <form ref={formRef} action={dispatch} className="space-y-6">
      {/* Name Input */}
      <div>
        <label
          htmlFor="name"
          className="block text-sm font-medium text-foreground mb-1"
        >
          Full Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          required
          className="block w-full px-4 py-2 border border-border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground"
          aria-describedby="name-error"
        />
        <div id="name-error" aria-live="polite" aria-atomic="true">
          {state.errors?.name &&
            state.errors.name.map((error: string) => (
              <p className="mt-1 text-sm text-destructive" key={error}>
                {error}
              </p>
            ))}
        </div>
      </div>

      {/* Email Input */}
      <div>
        <label
          htmlFor="email"
          className="block text-sm font-medium text-foreground mb-1"
        >
          Email Address
        </label>
        <input
          type="email"
          id="email"
          name="email"
          required
          className="block w-full px-4 py-2 border border-border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground"
          aria-describedby="email-error"
        />
        <div id="email-error" aria-live="polite" aria-atomic="true">
          {state.errors?.email &&
            state.errors.email.map((error: string) => (
              <p className="mt-1 text-sm text-destructive" key={error}>
                {error}
              </p>
            ))}
        </div>
      </div>

      {/* Subject Input */}
      <div>
        <label
          htmlFor="subject"
          className="block text-sm font-medium text-foreground mb-1"
        >
          Subject
        </label>
        <input
          type="text"
          id="subject"
          name="subject"
          required
          className="block w-full px-4 py-2 border border-border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground"
          aria-describedby="subject-error"
        />
        <div id="subject-error" aria-live="polite" aria-atomic="true">
          {state.errors?.subject &&
            state.errors.subject.map((error: string) => (
              <p className="mt-1 text-sm text-destructive" key={error}>
                {error}
              </p>
            ))}
        </div>
      </div>

      {/* Message Textarea */}
      <div>
        <label
          htmlFor="message"
          className="block text-sm font-medium text-foreground mb-1"
        >
          Your Message
        </label>
        <textarea
          id="message"
          name="message"
          rows={5}
          required
          className="block w-full px-4 py-2 border border-border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground"
          aria-describedby="message-error"
        ></textarea>
        <div id="message-error" aria-live="polite" aria-atomic="true">
          {state.errors?.message &&
            state.errors.message.map((error: string) => (
              <p className="mt-1 text-sm text-destructive" key={error}>
                {error}
              </p>
            ))}
        </div>
      </div>

      {/* General Form Message (Success or Error) */}
      <div id="form-response" aria-live="polite" aria-atomic="true">
        {state.message && (
          <p
            className={`text-sm ${
              state.success ? "text-green-600" : "text-destructive"
            }`}
          >
            {state.message}
          </p>
        )}
      </div>

      {/* Submit Button */}
      <div className="pt-2">
        <SubmitButton />
      </div>
    </form>
  );
}