Build a multi-step form with custom components

// src/components/ContactForm.tsx

import React, { useState } from 'react';
import './styles/ContactForm.css';

interface ContactFormProps {
  defaultName?: string;
  defaultEmail?: string;
  defaultMessage?: string;
}

export function ContactForm({
  defaultName = '',
  defaultEmail = '',
  defaultMessage = ''
}: ContactFormProps) {
  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData] = useState({
    name: defaultName,
    email: defaultEmail,
    message: defaultMessage
  });
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleNext = () => setCurrentStep(currentStep + 1);
  const handlePrevious = () => setCurrentStep(currentStep - 1);
  const handleSubmit = () => setIsSubmitted(true);

  if (isSubmitted) {
    return (
      <div className="contact-form-success">
        <h3>Thank you!</h3>
        <p>Your message has been sent.</p>
      </div>
    );
  }

  return (
    <div className="contact-form">
      <h2>Contact Us</h2>

      {/* Step 1: Basic Information */}
      {currentStep === 0 && (
        <div className="form-step">
          <div className="form-field">
            <label htmlFor="name">Name</label>
            <input
              id="name"
              type="text"
              value={formData.name}
              onChange={(e) => handleInputChange('name', e.target.value)}
              placeholder="Enter your name"
            />
          </div>

          <div className="form-field">
            <label htmlFor="email">Email</label>
            <input
              id="email"
              type="email"
              value={formData.email}
              onChange={(e) => handleInputChange('email', e.target.value)}
              placeholder="Enter your email"
            />
          </div>

          <button onClick={handleNext} className="btn-primary">
            Next
          </button>
        </div>
      )}

      {/* Step 2: Message */}
      {currentStep === 1 && (
        <div className="form-step">
          <div className="form-field">
            <label htmlFor="message">Message</label>
            <textarea
              id="message"
              value={formData.message}
              onChange={(e) => handleInputChange('message', e.target.value)}
              placeholder="Enter your message"
              rows={4}
            />
          </div>

          <div className="form-buttons">
            <button onClick={handlePrevious} className="btn-secondary">
              Previous
            </button>
            <button onClick={handleNext} className="btn-primary">
              Review
            </button>
          </div>
        </div>
      )}

      {/* Step 3: Review */}
      {currentStep === 2 && (
        <div className="form-step">
          <h3>Review your information</h3>

          <div className="review-section">
            <div className="review-item">
              <strong>Name:</strong>
              <span>{formData.name || 'Not provided'}</span>
            </div>

            <div className="review-item">
              <strong>Email:</strong>
              <span>{formData.email || 'Not provided'}</span>
            </div>

            <div className="review-item">
              <strong>Message:</strong>
              <span>{formData.message || 'Not provided'}</span>
            </div>
          </div>

          <div className="form-buttons">
            <button onClick={handlePrevious} className="btn-secondary">
              Previous
            </button>
            <button onClick={handleSubmit} className="btn-primary">
              Send Message
            </button>
          </div>
        </div>
      )}

      <div className="step-indicator">
        Step {currentStep + 1} of 3
      </div>
    </div>
  );
}