Partes.

<section class="ui-sample ui-document" data-parties-block="true"><h3>Partes</h3><dl><div><dt>Prestador</dt><dd>Compañía de Innovación de Santiago SpA<br/>RUT 78.384.591-1</dd></div><div><dt>Cliente</dt><dd>Círculo de Santiago SpA · RUT 78.372.913-K</dd></div></dl></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-parties-block="true"><h3>Partes</h3><dl class="grid gap-2"><div><dt>Prestador</dt><dd>Compañía de Innovación de Santiago SpA<br/>RUT 78.384.591-1</dd></div><div><dt>Cliente</dt><dd>Círculo de Santiago SpA · RUT 78.372.913-K</dd></div></dl></section>

export interface PartiesBlockItem {
  /** Papel de la parte en el documento («Prestador», «Cliente», «Mandante»); no es un atributo ARIA. */
  role: string;
  /** Razón social o nombre completo. */
  name: string;
  /** Identificación tributaria con su sigla («RUT 78.384.591-1»); vacía muestra sólo el nombre. */
  taxId?: string;
  /** Pone la identificación en una línea aparte, para nombres largos; si no, va después del nombre con « · ». */
  stacked?: boolean;
}

export interface PartiesBlockProps {
  title?: string;
  /** Partes del documento, en el orden en que aparecen en el texto. */
  items?: PartiesBlockItem[];
  className?: string;
}

const PARTIES_BLOCK_ITEMS: PartiesBlockItem[] = [
  { role: "Prestador", name: "Compañía de Innovación de Santiago SpA", taxId: "RUT 78.384.591-1", stacked: true },
  { role: "Cliente", name: "Círculo de Santiago SpA", taxId: "RUT 78.372.913-K" },
];

/**
 * Bloque de partes de un contrato o acuerdo, con el papel, el nombre y la identificación tributaria de cada una; va al inicio del documento, antes de las cláusulas.
 *
 * @example <PartiesBlock items={[{ role: "Prestador", name: "Compañía de Innovación de Santiago SpA", taxId: "RUT 78.384.591-1", stacked: true }, { role: "Cliente", name: "COCHID SpA", taxId: "RUT 78.374.391-4" }]} />
 */
export function PartiesBlock({ title = "Partes", items = PARTIES_BLOCK_ITEMS, className }: PartiesBlockProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-parties-block>
      <h3>{title}</h3>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.role}-${i}`}>
              <dt>{item.role}</dt>
              <dd>
                {item.taxId ? (item.stacked ? <>{item.name}<br />{item.taxId}</> : `${item.name} · ${item.taxId}`) : item.name}
              </dd>
            </div>
          ))}
        </dl>
      ) : null}
    </section>
  );
}