import clsx from "clsx";

export interface SectionLabelProps {
  /** mono index, e.g. "02" */
  index: string;
  title: string;
  /** optional mono hint rendered after the title */
  hint?: string;
  className?: string;
}

/** Compact numbered section header for model-detail sections. */
export default function SectionLabel({
  index,
  title,
  hint,
  className,
}: SectionLabelProps) {
  return (
    <div
      className={clsx(
        "flex flex-wrap items-baseline gap-x-3 gap-y-1",
        className,
      )}
    >
      <span
        aria-hidden
        className="num text-[11px] uppercase tracking-[0.22em] text-muted"
      >
        {index}
      </span>
      <h2 className="font-display text-xl leading-tight text-text">{title}</h2>
      {hint && <span className="num text-[11px] text-muted">{hint}</span>}
    </div>
  );
}