Step Tracker

'use client';

import type { CSSProperties, HTMLAttributes } from 'react';
import './StepProgress.css';

/**
 * StepProgress — A multi-stage stepper indicating flow through several discrete points.
 *
 * @param steps - Optional. Default Details / Payment / Finish.
 * @param activeIndex - Optional. Zero-based current step. Default 0.
 */
export interface StepProgressProps extends HTMLAttributes<HTMLDivElement> {
  steps?: Array<{ label: string }>;
  activeIndex?: number;
}

const defaultSteps = [{ label: 'Details' }, { label: 'Payment' }, { label: 'Finish' }];

export function StepProgress({ steps = defaultSteps, activeIndex = 0, className, ...rest }: StepProgressProps) {
  const progress = steps.length > 1 ? (activeIndex / (steps.length - 1)) * 100 : 0;
  return (
    <div {...rest} className={['steps-container', className].filter(Boolean).join(' ')}>
      <div className="steps-line" aria-hidden="true" style={{ '--progress': `${progress}%` } as CSSProperties} />
      <ol className="steps-list">
        {steps.map((step, i) => (
          <li
            key={step.label + i}
            className={['step-item', i === activeIndex && 'step-item--active', i < activeIndex && 'step-item--complete'].filter(Boolean).join(' ')}
            aria-current={i === activeIndex ? 'step' : undefined}
          >
            <div className="step-circle">{i + 1}</div>
            <span className="step-label">{step.label}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

export default StepProgress;

/* StepProgress — ported from astro-component-kit (feedback/StepProgress.astro) */

.steps-container { position: relative; margin-bottom: var(--sp-8, 2rem); width: 100%; padding: 0 var(--sp-4, 1rem); box-sizing: border-box; }

.steps-line { 
  position: absolute; 
  top: 16px; left: 0; right: 0; 
  height: 3px; 
  background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
  z-index: 0; 
}

.steps-line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: var(--progress);
  background: var(--c-primary, #6366f1);
  transition: width 0.4s ease-in-out;
  box-shadow: 0 0 10px rgba(99,102,241,0.3);
}

.steps-list { list-style: none; display: flex; justify-content: space-between; position: relative; z-index: 1; }

.step-circle { 
  width: 32px; height: 32px; 
  border-radius: var(--r-full, 50%); 
  background: var(--c-bg, #1e293b); 
  color: var(--c-text-2, #64748b); 
  border: 2px solid var(--c-border, rgba(255,255,255,0.1)); 
  display: grid; place-items: center; 
  font-size: 0.85rem; font-weight: 800; 
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-item--active .step-circle { 
  background: var(--c-primary, #6366f1); 
  border-color: var(--c-primary, #6366f1); 
  color: #fff; 
  box-shadow: 0 0 20px rgba(99,102,241,0.5); 
  transform: scale(1.1);
}

.step-item--complete .step-circle {
  background: var(--c-primary, #6366f1);
  border-color: var(--c-primary, #6366f1);
  color: #fff;
}

.step-label { 
  position: absolute; 
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 8px; 
  font-size: 0.7rem; 
  font-weight: 700;
  white-space: nowrap; 
  color: var(--c-text-2, #64748b); 
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.step-item--active .step-label, .step-item--complete .step-label { color: var(--c-text-1, #fff); }