Ficha de fuente.

<article class="ui-sample ui-content" data-source-card="true"><header><strong>INE · Encuesta Nacional de Empleo</strong> <span class="badge">Fuente primaria</span></header><dl><div><dt>Período</dt><dd>may-jul 2026</dd></div><div><dt>Cobertura</dt><dd>16 regiones</dd></div><div><dt>Licencia</dt><dd>Uso con atribución</dd></div></dl><a href="#fuente">Abrir publicación original</a></article>

<article class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-source-card="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>INE · Encuesta Nacional de Empleo</strong> <span class="badge">Fuente primaria</span></header><dl class="grid gap-2"><div><dt>Período</dt><dd>may-jul 2026</dd></div><div><dt>Cobertura</dt><dd>16 regiones</dd></div><div><dt>Licencia</dt><dd>Uso con atribución</dd></div></dl><a class="underline underline-offset-4" href="#fuente">Abrir publicación original</a></article>

/** Tipos de fuente habituales. Otro valor de `kind` se acepta tal cual. */
export type SourceCardKind = "Fuente primaria" | "Derivada";

export interface SourceCardItem {
  /** Nombre del dato de la ficha (`<dt>`): período, cobertura, licencia. */
  label: string;
  value: string;
}

export interface SourceCardProps {
  /** Nombre de la fuente (institución · producto). */
  title?: string;
  /** Tipo de fuente, visible como etiqueta junto al nombre; vacío lo oculta. */
  kind?: SourceCardKind | (string & {});
  /** Metadatos de la fuente como pares etiqueta y valor. */
  items?: SourceCardItem[];
  /** Enlace a la publicación original; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace a la publicación original. */
  linkLabel?: string;
  className?: string;
}

const SOURCE_CARD_ITEMS: SourceCardItem[] = [
  { label: "Período", value: "may-jul 2026" },
  { label: "Cobertura", value: "16 regiones" },
  { label: "Licencia", value: "Uso con atribución" },
];

/**
 * Ficha de fuente con nombre, tipo, período, cobertura, licencia y enlace a la publicación original; se usa junto a un artículo o gráfico que cita esos datos.
 *
 * `kind` distingue una fuente primaria de una derivada de otras.
 *
 * @example <SourceCard title="COCHID · Serie regional armonizada" kind="Derivada" href="/metodologia" linkLabel="Ver metodología" />
 * @example <SourceCard items={[{ label: "Período", value: "2025" }, { label: "Licencia", value: "CC BY 4.0" }]} />
 */
export function SourceCard({
  title = "INE · Encuesta Nacional de Empleo",
  kind = "Fuente primaria",
  items = SOURCE_CARD_ITEMS,
  href = "#fuente",
  linkLabel = "Abrir publicación original",
  className,
}: SourceCardProps) {
  return (
    <article className={["ui-content", className].filter(Boolean).join(" ")} data-source-card>
      {title || kind ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {title && kind ? " " : null}
          {kind ? <span className="badge">{kind}</span> : null}
        </header>
      ) : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {href && linkLabel ? <a href={href}>{linkLabel}</a> : null}
    </article>
  );
}