Step Breadcrumb Bar

'use client';

import './StepBreadcrumbBar.css';

/** class:list → className */
function cx(...args: unknown[]): string {
  const out: string[] = [];
  const walk = (v: unknown) => {
    if (!v) return;
    if (typeof v === 'string' || typeof v === 'number') out.push(String(v));
    else if (Array.isArray(v)) v.forEach(walk);
    else if (typeof v === 'object') for (const [k, on] of Object.entries(v as Record<string, unknown>)) if (on) out.push(k);
  };
  args.forEach(walk);
  return out.join(' ');
}

/**
 * StepBreadcrumbBar — Stepped workflow breadcrumb indicator for checkout, multi-step forms, or wizards.
 * 
 * @param {Array<{step: number, label: string, status: 'complete' | 'active' | 'upcoming', href?: string}>} steps - Step definitions.
 */
export interface StepBreadcrumbBarProps {
  steps?: Array<{
    step: number;
    label: string;
    status: 'complete' | 'active' | 'upcoming';
    href?: string;
  }>;
}

export function StepBreadcrumbBar({
  steps = [
    { step: 1, label: 'Account', status: 'complete', href: '#step-1' },
    { step: 2, label: 'Plan & Billing', status: 'active', href: '#step-2' },
    { step: 3, label: 'Preferences', status: 'upcoming', href: '#step-3' },
    { step: 4, label: 'Review', status: 'upcoming', href: '#step-4' },
  ],
}: StepBreadcrumbBarProps) {
  return (
    <>
      <nav className="step-nav" aria-label="Workflow progress" data-rk-71122f="">
        <ol className="step-nav__list" data-rk-71122f="">
          {steps.map((st, i) => (
            <li key={i} className={cx(['step-nav__item', `step-nav__item--${st.status}`])} data-rk-71122f="">
              <a href={st.href || '#'} className="step-nav__link" aria-current={st.status === 'active' ? 'step' : undefined} data-rk-71122f="">
                <span className="step-nav__circle" data-rk-71122f="">
                  {st.status === 'complete' ? (
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" data-rk-71122f="">
                      <polyline points="20 6 9 17 4 12" data-rk-71122f="" />
                    </svg>
                  ) : (
                    st.step
                  )}
                </span>
                <span className="step-nav__label" data-rk-71122f="">{st.label}</span>
              </a>
              {i < steps.length - 1 && (
                <div className="step-nav__line" aria-hidden="true" data-rk-71122f=""></div>
              )}
            </li>
          ))}
        </ol>
      </nav>
    </>
  );
}

export default StepBreadcrumbBar;

/* StepBreadcrumbBar — ported from astro-component-kit (navigation/StepBreadcrumbBar.astro) */

.step-nav:where([data-rk-71122f]) {
  width: 100%;
  max-width: 680px;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.step-nav__list:where([data-rk-71122f]) {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.step-nav__item:where([data-rk-71122f]) {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}

.step-nav__item:last-child:where([data-rk-71122f]) {
  flex: 0 0 auto;
}

.step-nav__link:where([data-rk-71122f]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c-text-3, #737373);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.step-nav__link:hover:where([data-rk-71122f]) {
  color: var(--c-text-1, #ffffff);
}

.step-nav__circle:where([data-rk-71122f]) {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--c-text-2, #a3a3a3);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

/* Status modifiers */
.step-nav__item--complete:where([data-rk-71122f]) .step-nav__circle:where([data-rk-71122f]) {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
}

.step-nav__item--complete:where([data-rk-71122f]) .step-nav__label:where([data-rk-71122f]) {
  color: var(--c-text-1, #ffffff);
}

.step-nav__item--active:where([data-rk-71122f]) .step-nav__circle:where([data-rk-71122f]) {
  background: linear-gradient(135deg, #d4a017, #b8860b);
  border-color: #d4a017;
  color: #050505;
  box-shadow: 0 0 12px rgba(212, 160, 23, 0.4);
}

.step-nav__item--active:where([data-rk-71122f]) .step-nav__label:where([data-rk-71122f]) {
  color: var(--c-primary-light, #d4a017);
  font-weight: 700;
}

.step-nav__line:where([data-rk-71122f]) {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 12px;
}

.step-nav__item--complete:where([data-rk-71122f]) .step-nav__line:where([data-rk-71122f]) {
  background: #10b981;
  opacity: 0.5;
}

@media (max-width: 640px) {
  .step-nav__label:where([data-rk-71122f]) {
    display: none;
  }
  .step-nav__line:where([data-rk-71122f]) {
    margin: 0 6px;
  }
}