import { Steps } from '@primitivekit/react';

<Steps current={1}>
  <Steps.Step title="Step 1" description="First step" />
  <Steps.Step title="Step 2" description="Second step" />
  <Steps.Step title="Step 3" description="Third step" />
</Steps>

<Steps current={1} direction="vertical">
  <Steps.Step title="Step 1" description="Complete" />
  <Steps.Step title="Step 2" description="In progress" />
  <Steps.Step title="Step 3" description="Waiting" />
</Steps>

import { CheckIcon, EditIcon, UploadIcon } from 'your-icon-library';

<Steps current={1}>
  <Steps.Step title="Login" icon={<CheckIcon />} />
  <Steps.Step title="Verification" icon={<EditIcon />} />
  <Steps.Step title="Upload" icon={<UploadIcon />} />
</Steps>

<Steps current={1}>
  <Steps.Step title="Finished" status="finish" />
  <Steps.Step title="In Progress" status="process" />
  <Steps.Step title="Waiting" status="wait" />
  <Steps.Step title="Error" status="error" />
</Steps>

<Steps
  current={1}
  style={{
    '--steps-icon-size': '40px',
    '--steps-finish-color': 'rgba(0, 200, 0, 1)',
    '--steps-process-color': 'rgba(0, 100, 255, 1)',
  }}
>
  <Steps.Step title="Step 1" />
  <Steps.Step title="Step 2" />
</Steps>

function MultiStepForm() {
  const [current, setCurrent] = useState(0);

  const steps = [
    { title: 'Account', description: 'Create your account' },
    { title: 'Profile', description: 'Set up your profile' },
    { title: 'Verification', description: 'Verify your email' },
    { title: 'Complete', description: 'All done!' },
  ];

  return (
    <div>
      <Steps current={current}>
        {steps.map((step, index) => (
          <Steps.Step key={index} {...step} />
        ))}
      </Steps>
      
      <div style={{ marginTop: '24px' }}>
        {current < steps.length - 1 && (
          <Button onClick={() => setCurrent(current + 1)}>
            Next
          </Button>
        )}
        {current > 0 && (
          <Button onClick={() => setCurrent(current - 1)}>
            Previous
          </Button>
        )}
      </div>
    </div>
  );
}