Stepper

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { Stepper } from "@/registry/ds/stepper";

const pasos = [
  { label: "Datos personales", description: "Nombre y documento" },
  { label: "Carrera", description: "Plan y sede" },
  { label: "Documentación", description: "Título y foto" },
  { label: "Confirmación", description: "Revisá y enviá" },
];

/** Controlado: Anterior/Siguiente mueven `current`; los pasos ya completados son clickeables para volver sin perder lo cargado */
export default function StepperInteractive() {
  const [current, setCurrent] = useState(1);
  const done = current >= pasos.length;

  return (
    <div className="flex w-full max-w-2xl flex-col gap-6">
      <Stepper steps={pasos.map((p, i) => ({ ...p, onClick: i < current ? () => setCurrent(i) : undefined }))} current={current} label="Inscripción" />
      <div className="rounded-xl border border-border bg-bg-elevated p-5 text-sm">
        <p className="font-medium text-fg">{done ? "¡Inscripción enviada!" : `Paso ${current + 1} de ${pasos.length}: ${pasos[current].label}`}</p>
        <p className="mt-1 text-fg-muted">{done ? "Te avisamos por correo cuando esté aprobada." : pasos[current].description}</p>
      </div>
      <div className="flex justify-between">
        <Button variant="stroke" disabled={current === 0} onClick={() => setCurrent((c) => Math.max(0, c - 1))}>
          Anterior
        </Button>
        <Button onClick={() => setCurrent((c) => Math.min(pasos.length, c + 1))} disabled={done}>
          {current === pasos.length - 1 ? "Enviar" : "Siguiente"}
        </Button>
      </div>
    </div>
  );
}