Tabla incorporada.

<figure class="ui-sample ui-embed" data-embed="table"><div class="ui-data"><table><caption>Desocupación regional</caption><thead><tr><th>Región</th><th>Tasa</th></tr></thead><tbody><tr><td>Valparaíso</td><td>8,1%</td></tr><tr><td>Biobío</td><td>7,6%</td></tr></tbody></table></div><figcaption><span>Fuente: INE · ENE</span><a href="#tabla-completa">Abrir tabla completa</a></figcaption></figure>

<figure class="ui-sample ui-embed border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-embed="table"><div class="ui-data"><table class="w-full border-collapse text-left"><caption>Desocupación regional</caption><thead><tr><th class="border-b border-slate-300 p-2 align-top">Región</th><th class="border-b border-slate-300 p-2 align-top">Tasa</th></tr></thead><tbody><tr><td class="border-b border-slate-300 p-2 align-top">Valparaíso</td><td class="border-b border-slate-300 p-2 align-top">8,1%</td></tr><tr><td class="border-b border-slate-300 p-2 align-top">Biobío</td><td class="border-b border-slate-300 p-2 align-top">7,6%</td></tr></tbody></table></div><figcaption class="text-sm text-slate-600"><span>Fuente: INE · ENE</span><a class="underline underline-offset-4" href="#tabla-completa">Abrir tabla completa</a></figcaption></figure>

export interface TableEmbedRow {
  /** Primera celda de la fila (región, período, categoría). */
  label: string;
  /** Una celda por cada columna después de la primera, con el valor ya formateado. */
  values: string[];
}

export interface TableEmbedProps {
  /** Título de la tabla (`<caption>`); vacío lo oculta. */
  caption?: string;
  /** Encabezados de columna; el primero corresponde a la primera celda de cada fila. */
  columns?: string[];
  /** Filas del extracto, con el valor ya formateado; sin filas no se muestra la tabla. */
  rows?: TableEmbedRow[];
  /** La primera celda de cada fila va como encabezado de fila (`<th>`) en vez de celda de datos; por defecto no. */
  rowHeaders?: boolean;
  /** Línea de fuente del pie, sin el separador final. */
  source?: string;
  /** Enlace a la tabla completa en el servicio que la publica; sin él no se muestra el enlace. */
  href?: string;
  linkLabel?: string;
  className?: string;
}

const COLUMNAS = ["Región", "Tasa"];

const FILAS: TableEmbedRow[] = [
  { label: "Valparaíso", values: ["8,1%"] },
  { label: "Biobío", values: ["7,6%"] },
];

/**
 * Tabla incorporada: extracto de una tabla publicada por otro servicio, con título, fuente y enlace a la tabla completa.
 *
 * Muestra pocas filas; el resto se consulta en `href`. Con `rowHeaders`, la primera celda de cada fila se anuncia como encabezado.
 *
 * @example <TableEmbed caption="Desocupación regional · jul 2026" columns={["Región", "Tasa"]} rows={[{ label: "Valparaíso", values: ["8,4%"] }, { label: "Biobío", values: ["7,6%"] }]} source="Fuente: INE · ENE" href="https://datos.cochid.cl/empleo" />
 */
export function TableEmbed({
  caption = "Desocupación regional",
  columns = COLUMNAS,
  rows = FILAS,
  rowHeaders = false,
  source = "Fuente: INE · ENE",
  href = "#tabla-completa",
  linkLabel = "Abrir tabla completa",
  className,
}: TableEmbedProps) {
  const enlace = linkLabel && href ? <a href={href}>{linkLabel}</a> : null;
  return (
    <figure className={["ui-embed", className].filter(Boolean).join(" ")} data-embed="table">
      {rows.length ? (
        <div className="ui-data">
          <table>
            {caption ? <caption>{caption}</caption> : null}
            {columns.length ? (
              <thead>
                <tr>{columns.map((columna, i) => <th key={i}>{columna}</th>)}</tr>
              </thead>
            ) : null}
            <tbody>
              {rows.map((fila, i) => (
                <tr key={i}>
                  {rowHeaders ? <th>{fila.label}</th> : <td>{fila.label}</td>}
                  {fila.values.map((valor, j) => <td key={j}>{valor}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : null}
      {source || enlace ? (
        <figcaption>
          {source ? <span>{source}</span> : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}