import Stepper, { Step } from '@/components/bynanaui/stepper';
import { useState } from 'react';

export default function Demo() {
  const [name, setName] = useState('');

  return (
    <Stepper
      initialStep={1}
      onStepChange={(step) => console.log('Current step:', step)}
      onFinalStepCompleted={() => console.log('Completed!')}
      backButtonText="Previous"
      nextButtonText="Next"
    >
      <Step>
        <h2>Welcome!</h2>
        <p>Let's get started with the stepper component.</p>
      </Step>
      <Step>
        <h2>Step 2</h2>
        <p>Add your custom content here.</p>
      </Step>
      <Step>
        <h2>Enter Your Name</h2>
        <input
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Your name?"
        />
      </Step>
      <Step>
        <h2>Complete!</h2>
        <p>You're all done, {name || 'friend'}!</p>
      </Step>
    </Stepper>
  );
}