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

type DetailFieldProps = {
  /** Field label (secondary, muted). */
  label: ReactNode;
  /**
   * `stacked` (default): label above value for detail grids and dialog blocks.
   * `inline`: label beside value for compact key/value rows.
   */
  orientation?: "stacked" | "inline";
  /** Convenience for simple text values. Ignored when `children` is provided. */
  value?: ReactNode;
  /** Rich content (chips, <pre>, links). Takes precedence over `value`. */
  children?: ReactNode;
  className?: string;
};

/**
 * Read-only labeled value for detail panels and dialogs. For editable form
 * controls use `Field` instead.
 */
export function DetailField({
  label,
  orientation = "stacked",
  value,
  children,
  className,
}: DetailFieldProps) {
  const content = children ?? value;
  if (orientation === "inline") {
    return (
      <div className={cn("flex gap-2 text-sm", className)}>
        <span className="shrink-0 font-medium text-ink-500">{label}</span>
        <div className="min-w-0 flex-1 text-ink-900">{content}</div>
      </div>
    );
  }

  return (
    <div className={cn("min-w-0", className)}>
      <div className="text-xs font-medium text-ink-500">{label}</div>
      <div className="mt-1 break-words text-sm font-medium text-ink-900">
        {content}
      </div>
    </div>
  );
}