/**
 * Magazine spread numbering — "01 / 05" with an eyebrow label.
 * Sits in the corner of a section per editorial convention.
 *
 * CUSTOMIZATION HOOK — CONTENT: index / total / label.
 */
export default function SectionLabel({
  index,
  total = 5,
  label,
  className = "",
}: {
  index: number;
  total?: number;
  label: string;
  className?: string;
}) {
  const pad = (n: number) => String(n).padStart(2, "0");
  return (
    <div className={`flex items-center gap-3 ${className}`}>
      <span className="corner-label">
        {pad(index)} <span className="text-ink-mute/50">/</span> {pad(total)}
      </span>
      <span className="h-px w-8 bg-ink/40" aria-hidden />
      <span className="kicker">{label}</span>
    </div>
  );
}