export default function Stepper({ steps, current, canEnter, onSelect }) {
  return (
    <nav>
      {steps.map((name, i) => (
        <button
          key={name}
          className={`step-item ${i === current ? 'active' : ''} ${i < current ? 'done' : ''}`}
          disabled={!canEnter(i)}
          onClick={() => onSelect(i)}
        >
          <span className="step-num">{i + 1}</span>
          {name}
        </button>
      ))}
    </nav>
  )
}