Lista de datos.

<dl class="ui-sample ui-data" data-data-list="true"><div><dt>Empleo regional</dt><dd>Serie mensual · 2010–2026</dd></div><div><dt>Fuente</dt><dd>INE · Encuesta Nacional de Empleo</dd></div><div><dt>Cobertura</dt><dd>16 regiones</dd></div></dl>

<dl class="ui-sample ui-data border border-slate-300 bg-white p-4 text-slate-950 grid gap-2" data-data-list="true"><div><dt>Empleo regional</dt><dd>Serie mensual · 2010–2026</dd></div><div><dt>Fuente</dt><dd>INE · Encuesta Nacional de Empleo</dd></div><div><dt>Cobertura</dt><dd>16 regiones</dd></div></dl>

export interface DataListItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  /** Valor o descripción del dato (`<dd>`). */
  value: string;
}

export interface DataListProps {
  items?: DataListItem[];
  className?: string;
}

const ITEMS: DataListItem[] = [
  { label: "Empleo regional", value: "Serie mensual · 2010–2026" },
  { label: "Fuente", value: "INE · Encuesta Nacional de Empleo" },
  { label: "Cobertura", value: "16 regiones" },
];

/**
 * Lista de datos descriptivos en pares nombre y valor; se usa para la ficha de un conjunto de datos (serie, fuente, cobertura).
 *
 * Para identificadores o huellas que se copian tal cual, usa `KeyValueList`.
 *
 * @example <DataList items={[{ label: "Fuente", value: "INE · Encuesta Nacional de Empleo" }, { label: "Cobertura", value: "15 de 16 regiones" }]} />
 */
export function DataList({ items = ITEMS, className }: DataListProps) {
  if (!items.length) return null;
  return (
    <dl className={["ui-data", className].filter(Boolean).join(" ")} data-data-list>
      {items.map((item, i) => (
        <div key={`${item.label}-${i}`}>
          <dt>{item.label}</dt>
          <dd>{item.value}</dd>
        </div>
      ))}
    </dl>
  );
}