Onboarding

import * as React from "react";
import { OnboardingCard } from "@/components/ui/onboarding";

/**
 * A demo component to showcase the OnboardingCard.
 */
export default function OnboardingCardDemo() {
  const [displayName, setDisplayName] = React.useState("");
  const [isLoading, setIsLoading] = React.useState(false);

  // Handler for the display name input change
  const handleDisplayNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // Basic validation: allow only alphanumeric characters and underscores
    const validUsername = e.target.value.replace(/[^a-zA-Z0-9_]/g, "");
    setDisplayName(validUsername);
  };

  // Placeholder function for upload button click
  const handleUploadClick = () => {
    alert("Upload button clicked!");
  };

  // Placeholder function for continue button click
  const handleContinueClick = () => {
    if (!displayName) {
      alert("Please enter a display name.");
      return;
    }
    setIsLoading(true);
    console.log("Continuing with display name:", displayName);
    // Simulate an API call
    setTimeout(() => {
      setIsLoading(false);
      alert(`Welcome, ${displayName}!`);
    }, 2000);
  };

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <OnboardingCard
        heroImageSrc="https://plus.unsplash.com/premium_photo-1695716578059-36842e9c045d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fHBlYWNvY2slMjBmZWF0aGVyfGVufDB8fDB8fHww?q=80&w=2864&auto=format&fit=crop"
        title="Welcome to Genesis"
        subtitle="Your first journey here!"
        displayName={displayName}
        onDisplayNameChange={handleDisplayNameChange}
        onUploadClick={handleUploadClick}
        onContinueClick={handleContinueClick}
        isLoading={isLoading}
      />
    </div>
  );
}