Stepper

import { useState, type ReactNode } from 'react';
import { motion } from 'motion/react';

type Step = { title: string; content: ReactNode; complete: boolean };
type Props = { steps: Step[]; onFinish: () => void };

const CIRCLE =
  'flex size-8 items-center justify-center rounded-full border text-muted-foreground transition-colors duration-300 group-data-done:border-blue-600 group-data-done:bg-blue-600 group-data-done:text-white aria-[current=step]:border-2 aria-[current=step]:border-blue-600 aria-[current=step]:text-blue-600';
const LINE =
  'relative h-0.5 flex-1 bg-muted group-last:hidden before:absolute before:inset-0 before:origin-left before:scale-x-0 before:bg-blue-600 before:transition-transform before:duration-300 group-data-done:before:scale-x-100';

// Each step's content stays mounted in the parent's state, so Back keeps what was typed.
export function Stepper({ steps, onFinish }: Props) {
  const [[index, direction], setIndex] = useState<[number, number]>([0, 1]);
  const go = (next: number) => setIndex([next, next > index ? 1 : -1]);
  const last = index === steps.length - 1;

  return (
    <div className='flex w-96 flex-col gap-6 text-sm'>
      <ol className='flex items-center gap-2 *:flex *:items-center *:gap-2 *:not-last:flex-1'>
        {steps.map(({ title }, i) => (
          <li key={title} data-done={i < index || undefined} className='group'>
            <span aria-current={i === index && 'step'} className={CIRCLE}>
              {i < index ? '✓' : i + 1}
            </span>
            {title}
            <span className={LINE} />
          </li>
        ))}
      </ol>
      {/* The new step slides in from the side you're heading toward. */}
      <motion.div
        key={index}
        initial={{ x: direction * 24, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
      >
        {steps[index]?.content}
      </motion.div>
      <div className='flex justify-between'>
        <button
          disabled={index === 0}
          onClick={() => go(index - 1)}
          className='px-4 py-2 disabled:invisible'
        >
          Back
        </button>
        <button
          disabled={!steps[index]?.complete}
          onClick={() => (last ? onFinish() : go(index + 1))}
          className='rounded-lg bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50'
        >
          {last ? 'Finish' : 'Next'}
        </button>
      </div>
    </div>
  );
}