shoc-frontend-new/src/app/invite/_components/invite-step-header.tsx

import { Text } from "@/components/ui/text";
import { cn } from "@/lib/utils";

export const INVITE_STEP_COUNT = 3;

export type InviteStep = 1 | 2 | 3;

export type InviteStepHeaderProps = {
  step: InviteStep;
  title: string;
  subtitle: string;
};

export function InviteStepHeader({ step, title, subtitle }: InviteStepHeaderProps) {
  return (
    <div className="mb-5">
      <div
        role="progressbar"
        aria-label="Registration progress"
        aria-valuemin={1}
        aria-valuemax={INVITE_STEP_COUNT}
        aria-valuenow={step}
        className="mb-5 flex items-center gap-1.5"
      >
        {[1, 2, 3].map((bar) => (
          <span
            key={bar}
            className={cn(
              "h-[3px] flex-1 rounded-sm",
              bar <= step ? "bg-(--color-primary)" : "bg-(--color-border)",
            )}
          />
        ))}
      </div>
      <Text variant="caption" tone="muted" className="block">
        {`Step ${step} of ${INVITE_STEP_COUNT}`}
      </Text>
      <Text variant="title" className="m-0 mt-1! ![font-size:var(--text-lg)] !font-semibold">
        {title}
      </Text>
      <Text variant="description" tone="muted" className="mt-1!">
        {subtitle}
      </Text>
    </div>
  );
}