Index Counter

import { cn } from "@/lib/utils";

export interface IndexCounterProps {
  current: number;
  total: number;
  /** Show a thin progress line under the numbers. */
  progress?: boolean;
  label?: string;
  className?: string;
}

/** Editorial index counter “03 / 12” in mono with zero padding and an optional hairline progress bar — for galleries, slides and case-study chapters. */
export function IndexCounter({ current, total, progress = true, label = "Project", className }: IndexCounterProps) {
  const pad = (n: number) => String(n).padStart(2, "0");
  return (
    <div className={cn("inline-grid w-28 gap-2", className)}>
      <p className="font-da-mono text-xs tracking-da-label uppercase">
        <span className="sr-only">
          {label} {current} of {total}
        </span>
        <span aria-hidden>
          {pad(current)} <span className="text-da-muted-fg">/ {pad(total)}</span>
        </span>
      </p>
      {progress && (
        <span aria-hidden className="h-px bg-da-border">
          <span className="block h-full bg-da-fg transition-[width] duration-(--da-duration-slow) ease-da" style={{ width: `${(current / total) * 100}%` }} />
        </span>
      )}
    </div>
  );
}

export default IndexCounter;