Stepper

import React, { useState, useEffect } from "react";
import { Stepper, Step } from "@/components/ui/stepper";

const DemoStepper = () => {
  const [name, setName] = useState("");
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    setIsDarkMode(prefersDark);
    if (prefersDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, []);

  const toggleDarkMode = () => {
    setIsDarkMode(prev => {
      const newMode = !prev;
      if (newMode) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
      return newMode;
    });
  };


  return (
    <div className="flex flex-col w-full min-h-screen justify-start items-center bg-slate-50 dark:bg-slate-900 py-10">
      <div className="w-full max-w-2xl mt-16">
        <Stepper
          initialStep={1}
          onStepChange={(step) => {
            console.log("Current step:", step);
          }}
          onFinalStepCompleted={() => {
            console.log("All steps completed!");
          }}
          backButtonText="Previous"
          nextButtonText="Next"
        >
          <Step>
            <div className="p-2">
              <h2 className="text-xl font-semibold text-slate-700 dark:text-slate-200 mb-2">Welcome to the Stepper!</h2>
              <p className="text-slate-600 dark:text-slate-300">This is the first step. Check out the next one!</p>
            </div>
          </Step>
          <Step>
            <div className="p-2">
              <h2 className="text-xl font-semibold text-slate-700 dark:text-slate-200 mb-2">Step 2: An Image</h2>
              <img
                style={{
                  height: '150px',
                  width: '100%',
                  objectFit: 'cover',
                  objectPosition: 'center center',
                  borderRadius: '8px',
                  marginTop: '1em',
                }}
                className="border border-slate-200 dark:border-slate-700"
                src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
                alt="A cute cat"
              />
              <p className="text-slate-600 dark:text-slate-300 mt-3">Here's some custom content with an image.</p>
            </div>
          </Step>
          <Step>
            <div className="p-2">
              <h2 className="text-xl font-semibold text-slate-700 dark:text-slate-200 mb-3">Step 3: Input Field</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-3">How about an input? Your data persists across step changes if managed in the parent.</p>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="What's your name?"
                className="w-full p-2 border border-slate-300 dark:border-slate-600 rounded-md focus:ring-sky-500 focus:border-sky-500 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500"
              />
              {name && <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">Hello, {name}!</p>}
            </div>
          </Step>
          <Step>
            <div className="p-2">
              <h2 className="text-xl font-semibold text-slate-700 dark:text-slate-200 mb-2">Final Step</h2>
              <p className="text-slate-600 dark:text-slate-300">You've made it to the last step before completion!</p>
              <p className="text-slate-600 dark:text-slate-300 mt-1">Click "Complete" to finish.</p>
            </div>
          </Step>
        </Stepper>
      </div>
    </div>
  );
};

export { DemoStepper };