membership-fe/src/components/registration/RegistrationStep3.js

import React, { useEffect } from 'react';
import { Label } from '../ui/label';
import { Input } from '../ui/input';
import { Textarea } from '../ui/textarea';

const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
  // Pre-fill directory fields when user opts in
  useEffect(() => {
    if (formData.show_in_directory && !formData.directory_email) {
      setFormData(prev => ({
        ...prev,
        directory_email: prev.email || '',
        directory_address: prev.address || '',
        directory_phone: prev.phone || '',
        directory_dob: prev.date_of_birth || '',
        directory_partner_name: prev.partner_first_name && prev.partner_last_name
          ? `${prev.partner_first_name} ${prev.partner_last_name}`
          : ''
      }));
    }
  }, [formData.show_in_directory]);

  return (
    <div className="space-y-6">
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Members Directory
        </h2>

        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          Would you like to be displayed on our private members directory? (optional and you can change the answer later)
        </p>

        {/* Directory Opt-in Radio Buttons */}
        <div className="space-y-3">
          <div
            className={`
              p-4 rounded-xl border-2 cursor-pointer transition-all
              ${formData.show_in_directory
                ? 'border-[var(--orange-light)] bg-[var(--orange-light)]/5'
                : 'border-[var(--neutral-800)] hover:border-brand-purple '
              }
            `}
            onClick={() => setFormData(prev => ({ ...prev, show_in_directory: true }))}
          >
            <div className="flex items-center space-x-3">
              <div className={`
                w-5 h-5 rounded-full border-2 flex items-center justify-center
                ${formData.show_in_directory ? 'border-[var(--orange-light)]' : 'border-[var(--neutral-800)]'}
              `}>
                {formData.show_in_directory && (
                  <div className="w-3 h-3 rounded-full bg-[var(--orange-light)]" />
                )}
              </div>
              <span className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                Yes, include me in the Members Directory
              </span>
            </div>
          </div>

          <div
            className={`
              p-4 rounded-xl border-2 cursor-pointer transition-all
              ${!formData.show_in_directory
                ? 'border-[var(--orange-light)] bg-[var(--orange-light)]/5'
                : 'border-[var(--neutral-800)] hover:border-brand-purple '
              }
            `}
            onClick={() => setFormData(prev => ({ ...prev, show_in_directory: false }))}
          >
            <div className="flex items-center space-x-3">
              <div className={`
                w-5 h-5 rounded-full border-2 flex items-center justify-center
                ${!formData.show_in_directory ? 'border-[var(--orange-light)]' : 'border-[var(--neutral-800)]'}
              `}>
                {!formData.show_in_directory && (
                  <div className="w-3 h-3 rounded-full bg-[var(--orange-light)]" />
                )}
              </div>
              <span className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                No, don't include me in the Members Directory
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Conditional Directory Fields */}
      {formData.show_in_directory && (
        <div className="space-y-4 mt-6 p-6 bg-background rounded-xl border border-[var(--neutral-800)]">
          <p className="text-brand-purple  text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Below, choose what information you would like include in the Members Only Directory.
            (If you ever want to update this information, remember the Directory Section and Account Section are separate)
          </p>

          <div>
            <Label htmlFor="directory_email">Your preferred contact email</Label>
            <Input
              id="directory_email"
              name="directory_email"
              type="email"
              value={formData.directory_email}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            />
          </div>

          <div>
            <Label htmlFor="directory_bio">Bio for my Member Profile</Label>
            <Textarea
              id="directory_bio"
              name="directory_bio"
              value={formData.directory_bio}
              onChange={handleInputChange}
              placeholder="Tell other members about yourself..."
              rows={4}
              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            />
          </div>

          <div>
            <Label htmlFor="directory_address">Preferred address</Label>
            <Input
              id="directory_address"
              name="directory_address"
              value={formData.directory_address}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            />
          </div>

          <div>
            <Label htmlFor="directory_phone">Preferred contact phone number</Label>
            <Input
              id="directory_phone"
              name="directory_phone"
              type="tel"
              value={formData.directory_phone}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            />
          </div>

          <div>
            <Label htmlFor="directory_dob">Date of birth</Label>
            <Input
              id="directory_dob"
              name="directory_dob"
              type="date"
              value={formData.directory_dob}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            />
          </div>

          <div>
            <Label htmlFor="directory_partner_name">
              Enter your partner's name as you'd like it to appear in the Members Directory
            </Label>
            <Input
              id="directory_partner_name"
              name="directory_partner_name"
              value={formData.directory_partner_name}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default RegistrationStep3;