import { RequiredIndicator } from "./required-indicator";

/** Fila de consulta compacta; los textos y reglas pertenecen al catálogo consumidor. */
export function TemplateFieldSummary({
  name,
  metadata,
  requiredLabel,
  notice,
}: {
  name: string;
  metadata: string;
  requiredLabel?: string | undefined;
  notice?: string | undefined;
}) {
  return (
    <div className="grid grid-cols-1 items-baseline gap-x-3 gap-y-0.5 py-2 text-sm @min-[420px]:grid-cols-[minmax(0,1fr)_minmax(100px,0.8fr)]">
      <span className="min-w-0 font-medium [overflow-wrap:anywhere]">
        {name}
        {requiredLabel && (
          <>
            {" "}
            <RequiredIndicator />
            <span className="sr-only"> {requiredLabel}</span>
          </>
        )}
      </span>
      <span className="col-start-1 row-start-2 text-xs text-muted-foreground @min-[420px]:col-start-2 @min-[420px]:row-start-1">
        {metadata}
      </span>
      {notice && <p className="col-span-full text-xs text-muted-foreground">{notice}</p>}
    </div>
  );
}