import type { ReactNode } from "react";

/** Etiqueta y valor responden al ancho de su ficha, no al ancho total del navegador. */
export function DetailField({
  label,
  children,
  density = "default",
}: {
  label: ReactNode;
  children: ReactNode;
  density?: "default" | "compact";
}) {
  return (
    <div
      className={
        density === "compact"
          ? "grid min-w-0 grid-cols-[minmax(0,0.7fr)_minmax(0,1.3fr)] gap-3 py-1 first:pt-0 last:pb-0"
          : "grid min-w-0 gap-1 border-b border-border/60 py-2.5 first:pt-0 last:border-0 last:pb-0 @min-[240px]:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] @min-[240px]:gap-3"
      }
    >
      <dt className="text-xs leading-5 text-muted-foreground">{label}</dt>
      <dd className="min-w-0 whitespace-pre-wrap break-words text-sm font-medium leading-5 [&_a]:cursor-pointer [&_a]:text-primary [&_a]:underline-offset-4 [&_a:hover]:underline [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-ring">
        {children}
      </dd>
    </div>
  );
}