Onboarding

// demo.tsx
"use client";

import { useState } from "react";
import {
  OnboardingQuestionnaire,
  QuestionnaireQuestion,
} from "@/components/ui/onboarding-1"; // Adjust path as needed
import {
  Wallet,
  Sparkles,
  Sunrise,
  Moon,
  User,
  Users,
} from "lucide-react"; // Using lucide-react for icons

/**
 * Demo component showcasing the OnboardingQuestionnaire.
 */
export default function OnboardingDemo() {
  // In a real app, this state would be managed by a parent component (e.g., a step manager)
  const [progress, setProgress] = useState(33);
  const [currentImage, setCurrentImage] = useState(
    "https://images.pexels.com/photos/3225528/pexels-photo-3225528.jpeg",
  );
  const [showBackButton, setShowBackButton] = useState(false);

  // Define the questions for this step
  const questions: QuestionnaireQuestion[] = [
    {
      id: "spendingHabits",
      label: "What best describes your travel spending habits?",
      minLabel: "Budget conscious",
      midLabel: "Reasonably priced",
      maxLabel: "Luxurious",
      minIcon: <Wallet className="w-3.5 h-3.5" />,
      maxIcon: <Sparkles className="w-3.5 h-3.5" />,
      defaultValue: 50,
    },
    {
      id: "dailySchedule",
      label:
        "Would you rather get an early start on the day or do you prefer to stay out late?",
      minLabel: "Early bird",
      midLabel: "Evening person",
      maxLabel: "Night owl",
      minIcon: <Sunrise className="w-3.5 h-3.5" />,
      maxIcon: <Moon className="w-3.5 h-3.5" />,
      defaultValue: 70, // Defaulting towards Night owl
    },
    {
      id: "socialPreference",
      label:
        "Do you have an independent streak when you travel, or do you seek out group camaraderie?",
      minLabel: "Independent",
      midLabel: "Solo explorer!",
      maxLabel: "Social",
      minIcon: <User className="w-3.5 h-3.5" />,
      maxIcon: <Users className="w-3.5 h-3.5" />,
      defaultValue: 20, // Defaulting towards Independent
    },
  ];

  // Handler for the "Next" button
  const handleNext = (answers: Record<string, number>) => {
    console.log("Answers:", answers);
    // Simulate moving to the next step
    setProgress(66);
    setCurrentImage(
      "https://images.pexels.com/photos/1535162/pexels-photo-1535162.jpeg",
    );
    setShowBackButton(true);
    alert("Check the console for the form data!");
  };

  // Handler for the "Back" button
  const handleBack = () => {
    console.log("Back clicked");
    // Simulate moving to the previous step
    setProgress(33);
    setCurrentImage(
      "https://images.pexels.com/photos/3225528/pexels-photo-3225528.jpeg",
    );
    setShowBackButton(false);
  };

  return (
    <OnboardingQuestionnaire
      title="What do you like to do?"
      questions={questions}
      imageSrc={currentImage} // The image will animate when this src changes
      progress={progress}
      showBack={showBackButton}
      onNext={handleNext}
      onBack={handleBack}
      onSaveAndExit={() => console.log("Save and exit clicked")}
    />
  );
}