Step Progress

"use client";

import { useState } from "react";

export default function StepProgress({ steps = 4 }: { steps?: number }) {
  const [done, setDone] = useState(1);
  const percent = Math.round((done / steps) * 100);
  return (
    <div className="w-72 space-y-3">
      <div
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={percent}
        className="h-2 overflow-hidden rounded-full bg-muted"
      >
        <div
          className="h-full rounded-full bg-primary transition-[width] duration-300"
          style={{ width: `${percent}%` }}
        />
      </div>
      <div className="flex items-center justify-between text-sm text-muted-foreground">
        <span>
          Step {done} of {steps}
        </span>
        <button
          type="button"
          className="text-foreground"
          onClick={() => setDone((d) => (d % steps) + 1)}
        >
          Next
        </button>
      </div>
    </div>
  );
}