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

export function AdminMetricSection({
  title,
  description,
  children,
  className,
  /** When true, title/description render inside the first child card surface. */
  inset = false,
}: {
  title: string;
  description?: string;
  children: ReactNode;
  className?: string;
  inset?: boolean;
}) {
  if (inset) {
    return (
      <section className={cn("min-w-0", className)}>
        <div className="rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv sm:p-5">
          <div className="mb-4 min-w-0">
            <h2 className="text-[1rem] font-semibold tracking-[-0.015em] text-primary">{title}</h2>
            {description ? (
              <p className="mt-1 text-[0.8125rem] leading-relaxed text-ink-60">{description}</p>
            ) : null}
          </div>
          {children}
        </div>
      </section>
    );
  }

  return (
    <section className={cn("space-y-3", className)}>
      <div className="min-w-0">
        <h2 className="text-[0.9375rem] font-semibold tracking-[-0.015em] text-primary">{title}</h2>
        {description ? (
          <p className="mt-1 max-w-[72ch] text-[0.8125rem] leading-relaxed text-ink-60">
            {description}
          </p>
        ) : null}
      </div>
      {children}
    </section>
  );
}