import type { ReactNode } from "react";
import { cn } from "@/lib/cn";

/** Page context under the shell title — keeps the header h1 as the primary title. */
export function AdminPageIntro({
  description,
  meta,
  actions,
  className,
}: {
  description?: string;
  meta?: ReactNode;
  actions?: ReactNode;
  className?: string;
}) {
  if (!description && !meta && !actions) {
    return null;
  }

  return (
    <div
      className={cn(
        "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6",
        className,
      )}
    >
      {description ? (
        <p className="max-w-[62ch] text-[0.9375rem] leading-relaxed text-ink-60">{description}</p>
      ) : (
        <span className="hidden sm:block" />
      )}
      {(meta || actions) && (
        <div className="flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2">
          {meta}
          {actions}
        </div>
      )}
    </div>
  );
}