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