arbret/frontend/app/exchange/components/StepIndicator.tsx

"use client";

import { CSSProperties } from "react";

type WizardStep = "details" | "booking" | "confirmation";

interface StepIndicatorProps {
  currentStep: WizardStep;
}

const styles: Record<string, CSSProperties> = {
  stepIndicator: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "1rem",
    marginBottom: "2rem",
  },
  step: {
    display: "flex",
    alignItems: "center",
    gap: "0.5rem",
    opacity: 0.4,
  },
  stepActive: {
    opacity: 1,
  },
  stepCompleted: {
    opacity: 0.7,
  },
  stepNumber: {
    fontFamily: "'DM Mono', monospace",
    width: "28px",
    height: "28px",
    borderRadius: "50%",
    background: "rgba(255, 255, 255, 0.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "0.875rem",
    fontWeight: 600,
    color: "#fff",
  },
  stepLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.875rem",
    color: "#fff",
  },
  stepDivider: {
    width: "40px",
    height: "1px",
    background: "rgba(255, 255, 255, 0.2)",
  },
};

/**
 * Component that displays the wizard step indicator.
 * Shows which step the user is currently on and which steps are completed.
 */
export function StepIndicator({ currentStep }: StepIndicatorProps) {
  return (
    <div style={styles.stepIndicator}>
      <div
        style={{
          ...styles.step,
          ...(currentStep === "details" ? styles.stepActive : styles.stepCompleted),
        }}
      >
        <span style={styles.stepNumber}>1</span>
        <span style={styles.stepLabel}>Exchange Details</span>
      </div>
      <div style={styles.stepDivider} />
      <div
        style={{
          ...styles.step,
          ...(currentStep === "booking"
            ? styles.stepActive
            : currentStep === "confirmation"
              ? styles.stepCompleted
              : {}),
        }}
      >
        <span style={styles.stepNumber}>2</span>
        <span style={styles.stepLabel}>Book Appointment</span>
      </div>
      <div style={styles.stepDivider} />
      <div
        style={{
          ...styles.step,
          ...(currentStep === "confirmation" ? styles.stepActive : {}),
        }}
      >
        <span style={styles.stepNumber}>3</span>
        <span style={styles.stepLabel}>Confirm</span>
      </div>
    </div>
  );
}