"use client";

import { camposParaLer, type DefinicaoDeCampo } from "@/lib/campos-proprios";

/*
  Os valores dos campos próprios para ler: nome em cima, valor embaixo, em
  grade. Campo desativado só aparece se ainda tiver valor gravado.
*/

export function CamposNaTela({
  definicoes,
  valores,
  vazio,
  colunas = 2,
}: {
  definicoes: DefinicaoDeCampo[];
  valores: unknown;
  /** O que mostrar quando nenhum campo tem valor. Sem isto, não mostra nada. */
  vazio?: React.ReactNode;
  colunas?: 1 | 2 | 3;
}) {
  const lista = camposParaLer(definicoes, valores);
  if (!lista.length) return vazio ? <>{vazio}</> : null;
  const grade = colunas === 3 ? "sm:grid-cols-2 lg:grid-cols-3" : colunas === 2 ? "sm:grid-cols-2" : "";
  return (
    <dl className={`grid grid-cols-1 gap-x-6 gap-y-3 ${grade}`}>
      {lista.map((campo) => (
        <div key={campo.chave} className="min-w-0">
          <dt className="text-xs font-medium text-[var(--ks-color-text-soft)]">{campo.campo}</dt>
          <dd className="mt-0.5 whitespace-pre-wrap break-words text-sm font-semibold text-[var(--ks-color-text-primary)]">{campo.texto}</dd>
        </div>
      ))}
    </dl>
  );
}