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

/** A label on the left, its value on the right, the rows of a detail panel. */
export function DetailRow({ label, children, className }: { label: string; children: ReactNode; className?: string }) {
  return (
    <div className={cn("flex items-center justify-between gap-4 py-1.5 text-sm", className)}>
      <dt className="text-muted-foreground shrink-0">{label}</dt>
      <dd className="text-foreground font-medium text-right min-w-0 truncate">{children}</dd>
    </div>
  );
}