import type { ReactNode } from "react";

type AdminSectionHeadingProps = {
  title: string;
  /** Mali, diskretan uppercase tag pored naslova (zamena za glasan eyebrow). */
  tag?: string;
  /** Opciona akcija sa desne strane (npr. ghost-button link). */
  action?: ReactNode;
};

/**
 * Kompaktno, premium zaglavlje sekcije. Naslov je svestan ali nije u centru
 * pažnje; kontekst-tag stoji diskretno pored. Konzistentno sa AdminPageIntro.
 */
export function AdminSectionHeading({
  title,
  tag,
  action,
}: AdminSectionHeadingProps) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-3">
      <div className="flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1">
        <h3 className="font-display text-[1.15rem] font-semibold leading-tight text-foreground">
          {title}
        </h3>
        {tag ? (
          <span className="text-[0.6rem] font-bold uppercase tracking-[0.18em] text-muted-foreground">
            {tag}
          </span>
        ) : null}
      </div>
      {action ? <div className="shrink-0">{action}</div> : null}
    </div>
  );
}